<!doctype html>



  


<html class="theme-next pisces use-motion" lang="zh-Hans">
<head><meta name="generator" content="Hexo 3.8.0">
  <meta name="baidu-site-verification" content="bk1wz1wzS4">
  <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">



<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">












  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css">




  
  
  
  

  
    
    
  

  

  

  

  

  
    
    
    <link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
  






<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css">

<link href="/css/main.css?v=5.1.0" rel="stylesheet" type="text/css">


  <meta name="keywords" content="学习,">








  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5.1.0">






<meta name="description" content="配置需要依赖jQuery包加载jQuery包123&amp;lt;head&amp;gt;&amp;lt;script src=&quot;/jquery/jquery.min.js&quot;&amp;gt;&amp;lt;/script&amp;gt;&amp;lt;/head&amp;gt; 加载Highcharts包123&amp;lt;head&amp;gt;&amp;lt;script src=&quot;/highcharts/highcharts.js&amp;gt;&amp;lt;/script&amp;gt;&amp;lt;">
<meta name="keywords" content="学习">
<meta property="og:type" content="article">
<meta property="og:title" content="jQuery之图形库Highcharts">
<meta property="og:url" content="https://youandme66.github.io/2017/03/10/first/index.html">
<meta property="og:site_name" content="腊月的季节">
<meta property="og:description" content="配置需要依赖jQuery包加载jQuery包123&amp;lt;head&amp;gt;&amp;lt;script src=&quot;/jquery/jquery.min.js&quot;&amp;gt;&amp;lt;/script&amp;gt;&amp;lt;/head&amp;gt; 加载Highcharts包123&amp;lt;head&amp;gt;&amp;lt;script src=&quot;/highcharts/highcharts.js&amp;gt;&amp;lt;/script&amp;gt;&amp;lt;">
<meta property="og:locale" content="zh-Hans">
<meta property="og:updated_time" content="2017-03-11T03:46:40.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="jQuery之图形库Highcharts">
<meta name="twitter:description" content="配置需要依赖jQuery包加载jQuery包123&amp;lt;head&amp;gt;&amp;lt;script src=&quot;/jquery/jquery.min.js&quot;&amp;gt;&amp;lt;/script&amp;gt;&amp;lt;/head&amp;gt; 加载Highcharts包123&amp;lt;head&amp;gt;&amp;lt;script src=&quot;/highcharts/highcharts.js&amp;gt;&amp;lt;/script&amp;gt;&amp;lt;">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Pisces',
    sidebar: {"position":"left","display":"post"},
    fancybox: true,
    motion: true,
    duoshuo: {
      userId: '0',
      author: 'youandme'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="https://youandme66.github.io/2017/03/10/first/">





  <title> jQuery之图形库Highcharts | 腊月的季节 </title>
  <script>
  (function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
  })();
</script>
</head>

<body itemscope="" itemtype="http://schema.org/WebPage" lang="zh-Hans">

  










  
  
    
  

  <div class="container one-collumn sidebar-position-left page-post-detail ">
    <div class="headband"></div>

    <header id="header" class="header" itemscope="" itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-meta ">
  

  <div class="custom-logo-site-title">
    <a href="/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <span class="site-title">腊月的季节</span>
      <span class="logo-line-after"><i></i></span>
    </a>
  </div>
  <p class="site-subtitle"></p>
</div>

<div class="site-nav-toggle">
  <button>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
  </button>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br>
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br>
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/about" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-user"></i> <br>
            
            关于
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br>
            
            归档
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br>
            
            标签
          </a>
        </li>
      

      
        <li class="menu-item menu-item-search">
          
            <a href="javascript:;" class="popup-trigger">
          
            
              <i class="menu-item-icon fa fa-search fa-fw"></i> <br>
            
            搜索
          </a>
        </li>
      
    </ul>
  

  
    <div class="site-search">
      
  <div class="popup">
 <span class="search-icon fa fa-search"></span>
 <input type="text" id="local-search-input">
 <div id="local-search-result"></div>
 <span class="popup-btn-close">close</span>
</div>


    </div>
  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal " itemscope="" itemtype="http://schema.org/Article">
  <link itemprop="mainEntityOfPage" href="https://youandme66.github.io/2017/03/10/first/">

  <span style="display:none" itemprop="author" itemscope="" itemtype="http://schema.org/Person">
    <meta itemprop="name" content="腊月的季节">
    <meta itemprop="description" content="">
    <meta itemprop="image" content="/uploads/avatar.jpg">
  </span>

  <span style="display:none" itemprop="publisher" itemscope="" itemtype="http://schema.org/Organization">
    <meta itemprop="name" content="腊月的季节">
    <span style="display:none" itemprop="logo" itemscope="" itemtype="http://schema.org/ImageObject">
      <img style="display:none;" itemprop="url image" alt="腊月的季节" src="">
    </span>
  </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                jQuery之图形库Highcharts
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>
              <time title="Post created" itemprop="dateCreated datePublished" datetime="2017-03-10T00:00:00+08:00">
                2017-03-10
              </time>
            

            

            
          </span>

          
            <span class="post-category">
              <span class="post-meta-divider">|</span>
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
              
                <span itemprop="about" itemscope="" itemtype="http://schema.org/Thing">
                  <a href="/categories/JavaScript/" itemprop="url" rel="index">
                    <span itemprop="name">JavaScript</span>
                  </a>
                </span>

                
                
                  ， 
                
              
                <span itemprop="about" itemscope="" itemtype="http://schema.org/Thing">
                  <a href="/categories/JavaScript/jQuery/" itemprop="url" rel="index">
                    <span itemprop="name">jQuery</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
            <!--noindex-->
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                  <a href="/2017/03/10/first/#comments" itemprop="discussionUrl">
                    <span class="post-comments-count hc-comment-count" data-xid="2017/03/10/first/" itemprop="commentsCount"></span>
                  </a>
                </span>
              </span>
              <!--/noindex-->
            
          

          

          
          
             <span id="/2017/03/10/first/" class="leancloud_visitors" data-flag-title="jQuery之图形库Highcharts">
               <span class="post-meta-divider">|</span>
               <span class="post-meta-item-icon">
                 <i class="fa fa-eye"></i>
               </span>
               <span class="post-meta-item-text">阅读次数 </span>
               <span class="leancloud-visitors-count"></span>
              </span>
          

          

          

        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        <h3 id="配置"><a href="#配置" class="headerlink" title="配置"></a>配置</h3><p>需要依赖jQuery包<br>加载jQuery包<br><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"/jquery/jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<p>加载Highcharts包<br><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"/highcharts/highcharts.js&gt;&lt;/script&gt;</span></span></span><br><span class="line"><span class="tag"><span class="string">&lt;/head&gt;</span></span></span><br></pre></td></tr></table></figure></p>
<p>第一步:创建HTML页面<br>ceshi.html<br><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>Highcharts 教程 | 菜鸟教程<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">   <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"/try/demo_source/highcharts.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"container"</span> <span class="attr">style</span>=<span class="string">"width: 550px; height: 400px; margin: 0 auto"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">language</span>=<span class="string">"JavaScript"</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="undefined">     </span></span><br><span class="line"><span class="undefined">&#125;);</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<p>实例中的id为container的div用于包含Highcharts绘制的图表。<br>第二步:创建配置文件<br>Hightcharts库使用json格式来配置<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'#container'</span>).highcharts(json);</span><br></pre></td></tr></table></figure></p>
<p>这里json表示使用json数据格式和json格式的配置来绘制图表。步骤如下:<br>标题<br>为图表配置标题<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> title=&#123;</span><br><span class="line">    text:<span class="string">'月平均气温'</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure></p>
<p>副标题<br>为图表配置副标题<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> subtitle=&#123;</span><br><span class="line">    text:<span class="string">'source:liuzhihao.com'</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure></p>
<p>X轴<br>配置要在X轴显示的项<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> xAxis = &#123;</span><br><span class="line">    categories:[<span class="string">'一月'</span>,<span class="string">'二月'</span>,<span class="string">'三月'</span>,<span class="string">'四月'</span>,<span class="string">'五月'</span>,<span class="string">'六月'</span>,<span class="string">'七月'</span>,<span class="string">'八月'</span>,<span class="string">'九月'</span>,<span class="string">'十月'</span>,<span class="string">'十一月'</span>,<span class="string">'十二月'</span>]</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure></p>
<p>Y轴<br>配置要在Y轴显示的项<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> yAxis = &#123;</span><br><span class="line">    title: &#123;</span><br><span class="line">        text:<span class="string">'Temperature(\xBOC)'</span></span><br><span class="line">&#125;,</span><br><span class="line">    plotLines:[&#123;</span><br><span class="line">        value:<span class="number">0</span>,</span><br><span class="line">        width:<span class="number">1</span>,</span><br><span class="line">        color:<span class="string">'#808080'</span></span><br><span class="line">&#125;]</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure></p>
<p>展示方式<br>配置图表向右对齐<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> legend = &#123;</span><br><span class="line">    layout:<span class="string">'vertical'</span>,</span><br><span class="line">    align:<span class="string">'right'</span>,</span><br><span class="line">    verticalAlign:<span class="string">'middle'</span>,</span><br><span class="line">    borderWidth:<span class="number">0</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p>数据<br>配置图表要展示的数据。每个系列是个数组，每一项在图片中都会生成一条曲线。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> series =  [</span><br><span class="line">   &#123;</span><br><span class="line">      name: <span class="string">'Tokyo'</span>,</span><br><span class="line">      data: [<span class="number">7.0</span>, <span class="number">6.9</span>, <span class="number">9.5</span>, <span class="number">14.5</span>, <span class="number">18.2</span>, <span class="number">21.5</span>, <span class="number">25.2</span>, </span><br><span class="line">         <span class="number">26.5</span>, <span class="number">23.3</span>, <span class="number">18.3</span>, <span class="number">13.9</span>, <span class="number">9.6</span>]</span><br><span class="line">   &#125;, </span><br><span class="line">   &#123;</span><br><span class="line">      name: <span class="string">'New York'</span>,</span><br><span class="line">      data: [<span class="number">-0.2</span>, <span class="number">0.8</span>, <span class="number">5.7</span>, <span class="number">11.3</span>, <span class="number">17.0</span>, <span class="number">22.0</span>, <span class="number">24.8</span>, </span><br><span class="line">         <span class="number">24.1</span>, <span class="number">20.1</span>, <span class="number">14.1</span>, <span class="number">8.6</span>, <span class="number">2.5</span>]</span><br><span class="line">   &#125;, </span><br><span class="line">   &#123;</span><br><span class="line">      name: <span class="string">'Berlin'</span>,</span><br><span class="line">      data: [<span class="number">-0.9</span>, <span class="number">0.6</span>, <span class="number">3.5</span>, <span class="number">8.4</span>, <span class="number">13.5</span>, <span class="number">17.0</span>, <span class="number">18.6</span>, </span><br><span class="line">         <span class="number">17.9</span>, <span class="number">14.3</span>, <span class="number">9.0</span>, <span class="number">3.9</span>, <span class="number">1.0</span>]</span><br><span class="line">   &#125;, </span><br><span class="line">   &#123;</span><br><span class="line">      name: <span class="string">'London'</span>,</span><br><span class="line">      data: [<span class="number">3.9</span>, <span class="number">4.2</span>, <span class="number">5.7</span>, <span class="number">8.5</span>, <span class="number">11.9</span>, <span class="number">15.2</span>, <span class="number">17.0</span>, </span><br><span class="line">         <span class="number">16.6</span>, <span class="number">14.2</span>, <span class="number">10.3</span>, <span class="number">6.6</span>, <span class="number">4.8</span>]</span><br><span class="line">   &#125;</span><br><span class="line">];</span><br></pre></td></tr></table></figure></p>
<p>第三部:创建json数据<br>组合是由配置信息:<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> json = &#123;&#125;;</span><br><span class="line"></span><br><span class="line">json.title = title;</span><br><span class="line">json.subtitle = subtitle;</span><br><span class="line">json.xAxis = xAxis;</span><br><span class="line">json.yAxis = yAxis;</span><br><span class="line">json.tooltip = tooltip;</span><br><span class="line">json.legend = legend;</span><br><span class="line">json.series = series;</span><br><span class="line">Step <span class="number">4</span>: Draw the chart</span><br><span class="line">$(<span class="string">'#container'</span>).highcharts(json);</span><br></pre></td></tr></table></figure></p>
<p>实例<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> json = &#123;&#125;;</span><br><span class="line"></span><br><span class="line">json.title = title;</span><br><span class="line">json.subtitle = subtitle;</span><br><span class="line">json.xAxis = xAxis;</span><br><span class="line">json.yAxis = yAxis;</span><br><span class="line">json.tooltip = tooltip;</span><br><span class="line">json.legend = legend;</span><br><span class="line">json.series = series;</span><br><span class="line">Step <span class="number">4</span>: Draw the chart</span><br><span class="line">$(<span class="string">'#container'</span>).highcharts(json);</span><br><span class="line">实例</span><br><span class="line">以下为完整的实例(HighchartsTest.htm)：</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta charset=<span class="string">"UTF-8"</span> /&gt;</span><br><span class="line">&lt;title&gt;Highcharts 教程 | 菜鸟教程(runoob.com)&lt;<span class="regexp">/title&gt;</span></span><br><span class="line"><span class="regexp">&lt;script src="http:/</span><span class="regexp">/apps.bdimg.com/</span>libs/jquery/<span class="number">2.1</span><span class="number">.4</span>/jquery.min.js<span class="string">"&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="string">&lt;script src="</span>http:<span class="comment">//code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;</span></span><br><span class="line">&lt;<span class="regexp">/head&gt;</span></span><br><span class="line"><span class="regexp">&lt;body&gt;</span></span><br><span class="line"><span class="regexp">&lt;div id="container" style="width: 550px; height: 400px; margin: 0 auto"&gt;&lt;/</span>div&gt;</span><br><span class="line">&lt;script language=<span class="string">"JavaScript"</span>&gt;</span><br><span class="line">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">   <span class="keyword">var</span> title = &#123;</span><br><span class="line">       text: <span class="string">'月平均气温'</span>   </span><br><span class="line">   &#125;;</span><br><span class="line">   <span class="keyword">var</span> subtitle = &#123;</span><br><span class="line">        text: <span class="string">'Source: runoob.com'</span></span><br><span class="line">   &#125;;</span><br><span class="line">   <span class="keyword">var</span> xAxis = &#123;</span><br><span class="line">       categories: [<span class="string">'一月'</span>, <span class="string">'二月'</span>, <span class="string">'三月'</span>, <span class="string">'四月'</span>, <span class="string">'五月'</span>, <span class="string">'六月'</span></span><br><span class="line">              ,<span class="string">'七月'</span>, <span class="string">'八月'</span>, <span class="string">'九月'</span>, <span class="string">'十月'</span>, <span class="string">'十一月'</span>, <span class="string">'十二月'</span>]</span><br><span class="line">   &#125;;</span><br><span class="line">   <span class="keyword">var</span> yAxis = &#123;</span><br><span class="line">      title: &#123;</span><br><span class="line">         text: <span class="string">'Temperature (\xB0C)'</span></span><br><span class="line">      &#125;,</span><br><span class="line">      plotLines: [&#123;</span><br><span class="line">         value: <span class="number">0</span>,</span><br><span class="line">         width: <span class="number">1</span>,</span><br><span class="line">         color: <span class="string">'#808080'</span></span><br><span class="line">      &#125;]</span><br><span class="line">   &#125;;   </span><br><span class="line"></span><br><span class="line">   <span class="keyword">var</span> tooltip = &#123;</span><br><span class="line">      valueSuffix: <span class="string">'\xB0C'</span></span><br><span class="line">   &#125;</span><br><span class="line"></span><br><span class="line">   <span class="keyword">var</span> legend = &#123;</span><br><span class="line">      layout: <span class="string">'vertical'</span>,</span><br><span class="line">      align: <span class="string">'right'</span>,</span><br><span class="line">      verticalAlign: <span class="string">'middle'</span>,</span><br><span class="line">      borderWidth: <span class="number">0</span></span><br><span class="line">   &#125;;</span><br><span class="line"></span><br><span class="line">   <span class="keyword">var</span> series =  [</span><br><span class="line">      &#123;</span><br><span class="line">         name: <span class="string">'Tokyo'</span>,</span><br><span class="line">         data: [<span class="number">7.0</span>, <span class="number">6.9</span>, <span class="number">9.5</span>, <span class="number">14.5</span>, <span class="number">18.2</span>, <span class="number">21.5</span>, <span class="number">25.2</span>,</span><br><span class="line">            <span class="number">26.5</span>, <span class="number">23.3</span>, <span class="number">18.3</span>, <span class="number">13.9</span>, <span class="number">9.6</span>]</span><br><span class="line">      &#125;, </span><br><span class="line">      &#123;</span><br><span class="line">         name: <span class="string">'New York'</span>,</span><br><span class="line">         data: [<span class="number">-0.2</span>, <span class="number">0.8</span>, <span class="number">5.7</span>, <span class="number">11.3</span>, <span class="number">17.0</span>, <span class="number">22.0</span>, <span class="number">24.8</span>,</span><br><span class="line">            <span class="number">24.1</span>, <span class="number">20.1</span>, <span class="number">14.1</span>, <span class="number">8.6</span>, <span class="number">2.5</span>]</span><br><span class="line">      &#125;, </span><br><span class="line">      &#123;</span><br><span class="line">         name: <span class="string">'Berlin'</span>,</span><br><span class="line">         data: [<span class="number">-0.9</span>, <span class="number">0.6</span>, <span class="number">3.5</span>, <span class="number">8.4</span>, <span class="number">13.5</span>, <span class="number">17.0</span>, <span class="number">18.6</span>,</span><br><span class="line">            <span class="number">17.9</span>, <span class="number">14.3</span>, <span class="number">9.0</span>, <span class="number">3.9</span>, <span class="number">1.0</span>]</span><br><span class="line">      &#125;, </span><br><span class="line">      &#123;</span><br><span class="line">         name: <span class="string">'London'</span>,</span><br><span class="line">         data: [<span class="number">3.9</span>, <span class="number">4.2</span>, <span class="number">5.7</span>, <span class="number">8.5</span>, <span class="number">11.9</span>, <span class="number">15.2</span>, <span class="number">17.0</span>, </span><br><span class="line">            <span class="number">16.6</span>, <span class="number">14.2</span>, <span class="number">10.3</span>, <span class="number">6.6</span>, <span class="number">4.8</span>]</span><br><span class="line">      &#125;</span><br><span class="line">   ];</span><br><span class="line"></span><br><span class="line">   <span class="keyword">var</span> json = &#123;&#125;;</span><br><span class="line"></span><br><span class="line">   json.title = title;</span><br><span class="line">   json.subtitle = subtitle;</span><br><span class="line">   json.xAxis = xAxis;</span><br><span class="line">   json.yAxis = yAxis;</span><br><span class="line">   json.tooltip = tooltip;</span><br><span class="line">   json.legend = legend;</span><br><span class="line">   json.series = series;</span><br><span class="line"></span><br><span class="line">   $(<span class="string">'#container'</span>).highcharts(json);</span><br><span class="line">&#125;);</span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>body&gt;</span><br><span class="line">&lt;<span class="regexp">/html&gt;</span></span><br></pre></td></tr></table></figure></p>
<h3 id="参数配置-属性-事件"><a href="#参数配置-属性-事件" class="headerlink" title="参数配置(属性+事件)"></a>参数配置(属性+事件)</h3><p>1、chart.events.addSeries：添加数列到图表中。<br>2、chart.events.click：整个图表的绘图区上所发生的点击事件。<br>3、chart.events.load：图表加载事件。<br>4、chart.events.redraw：图表重画事件，当点击图注显示和隐藏绘图时可以触发。<br>5、chart.events.selection：当图表曲线可选择放大时，当选择图表操作时，可以触发该事件。<br>6、chart.height：所绘制图表的高度值。<br>7、chart.inverted：图表中的x，y轴对换。<br>8、chart.polar：是否为极性图表。<br>9、chart.reflow：当窗口大小改变时，图表宽度自适应窗口大小改变。<br>10、chart.renderTo：图表加载的位置，是页面上的一个DOM对象。<br>11、chart.showAxes：在空白图表中，是否显示坐标轴。<br>12、chart.type：图表的类型，默认为line，还有bar/column/pie……<br>13、chart.width：图表绘图区的宽度，默认为自适应。<br>14、chart.zoomType：图表中数据报表的放大类型，可以以X轴放大，或是以Y轴放大，还可以以XY轴同时放大。<br>15、colors：图表中多数列时，各数列之间的颜色。是一个数组，一般不动。<br>16、credits.enabled：是否允许显示版权信息。<br>17、credits.href：版权所有的链接。<br>18、credits.text：版权信息显示文字。<br>19、exporting.buttons.exportButton.enabled：是否允许显示导出按钮。<br>20、exporting.buttons.exportButton.menuItems：导出按钮的菜单选项。<br>21、exporting.buttons.exportButton.onclick：导出按钮被点击的事件，不是内部的菜单。<br>22、exporting.buttons.printButton.enabled：是否允许打印按钮。<br>23、exporting.buttons.printButton.onclick：打印按钮的点击事件。<br>24、exporting.enabled：打印和导出按钮是否被允许。<br>25、exporting.filename：被导出文件的文件名。<br>26、exporting.type：默认导出图片的文件格式。<br>27、exporting.url：SVG图表转换并导出的接口处理地址。<br>28、exporing.width：默认导出图片的宽度。<br>29、labels：标签，可以加载到图表的任何位置，里面有items，style。<br>30、lang：语言参数配置，与导出按钮菜单有关的配置，时间名称的配置等。<br>31、legend.enabled：是否允许图注。<br>32、navigation.buttonOptions.enabled：图表中所有导航中的按钮是否可被点击。<br>33、plotOptions.area.allowPointSelect：是否允许数据点的点击。<br>34、plotOptions.area.color：绘图的颜色。<br>35、plotOptions.area.dataLabels.enabled：是否允许数据标签。<br>36、plotOptions.area.enableMouseTracking：是否允许数据图表中，数据点的鼠标跟踪气泡显示。<br>37、plotOptions.area.events.checkboxClick：数据图表中图注中复选框的点击事件。<br>38、plotOptions.area.events.click：数据图表中，数据点的点击事件。<br>39、plotOptions.area.events.hide：数据图表中，某一数据序列隐藏时的事件。<br>40、plotOptions.area.events.show：数据图表中，某一数据序列显示时的事件。<br>41、plotOptions.area.events.legendItemClick：数据图表中，图注中的项目被点击时的事件，直接赋值false，则不可点击。<br>42、plotOptions.area.events.mouseOut：数据点的鼠标移出事件。<br>43、plotOptions.area.events.mouseOver：数据点的鼠标经过事件。<br>44、plotOptions.area.marker.enabled：图表中绘图中是否显示点的标记符。<br>45、plotOptions.area.marker.states.hover.enabled：是否允许标记符的鼠标经过状态。<br>46、plotOptions.area.marker.states.select.enabled：是否允许标记符的选择状态。<br>47、plotOptions.area.point.events.click：图表中每一个单独的点点击事件。<br>48、plotOptions.area.point.events.mouseOut<br>49、plotOptions.area.point.events..mouseOver<br>50、plotOptions.area.point.events.remove：删除图表中的点时的事件。<br>51、plotOptions.area.point.events.select：图表中点选择事件。<br>52、plotOptions.area.point.events.unselect：图表中点取消选择时的事件。<br>53、plotOptions.area.point.events.update：图表中数据发生更新时的事件。<br>54、plotOptions.area.visible：加载时，数据序列默认是显示还是隐藏。<br>55、plotOptions.area.zIndex：在多序列的情况下，调整每一个序列的层叠顺序。<br>以上的point.events同样还适用于其他面积类图表（arearange、areaspline、areasplinerange），其他的柱状图（bar、column）及所有图表。<br>56、plotOptions.area.showInLegend：是否在图注中显示。<br>57、plotOptions.area.stacking：是以值堆叠，还是以百分比堆叠。<br>58、plotOptions.area.states.hover.enabled：鼠标放上的状态是否允许。<br>59、plotOptions.area.stickyTracking：鼠标粘性跟踪数据点。<br>60、plotOptions.arearange，plotOptions.areaspline，plotOptions.areasplinerange类同于plotOptions.area<br>61、plotOptions.bar.groupPadding：对于柱状图分组，每个分组之间的间隔。<br>62、plotOptions.bar.grouping：是否对数据进行分组。<br>63、plotOptions.bar.minPointLength:：定义当point值为零时，点的最小长度为多少<br>64、plotOptions.bar.showInLegend：是否在图注中显示。<br>65、plotOptions.bar.stacking：是以值堆叠，还是以百分比堆叠（normal/percent）。<br>66、plotOptions.column，plotOptions.columnrange类同于plotOptions.bar<br>67、plotOptions.line的相关配置类似于plotOptions.area配置。<br>68、plotOptions.pie.ignoreHiddenPoint：在饼状图中，某一个序列经图注点击隐藏后，整个饼状图是重新以100%分配，还是只在原图基础上隐藏，呈现一个缺口。<br>69、plotOptions.pie.innerSize：绘制饼状图时，饼状图的圆心预留多大的空白。<br>70、plotOptions.pie.slicedOffset：与allowPointSelect结合使用，当点被点击时，对应的扇区剥离，这个参数即配置离开的距离。<br>71、plotOptions.pie的其他常用配置参数类同于plotOptions.area,plotOptions.scatter，plotOptions.series，plotOptions.spline的相关配置类似于plotOptions.area配置。<br>72、series：是一个数组。<br>73、series.data.color：某一个数据的颜色。<br>74、series.data.dataLabels：序列中某一个数据的数据标签。<br>75、series.data.events类同于plotOptions.area.point.events的相关配置。<br>76、series.data.marker类同于plotOptions.area.marker的相关配置。<br>77、series.data.name：配置数据点的名称。<br>78、series.data.sliced：配置在饼图中，扇区的分离距离大小。<br>79、series.data.x：点的x值。<br>80、series.data.y：点的y值。<br>81、series.name：数据序列的名称。<br>82、series.stack：堆叠的分组索引。<br>83、series.type：数据序列的展示类型。<br>84、series.xAxis，series.yAxis：当使用多坐标轴时，指定某个数列对应哪个坐标轴。<br>85、subtitle：配置图表的子标题。<br>86、title：配置图表的标题。<br>87、tooltip：配置图表中数据的气泡提示。<br>88、tooltip.valueDecimals：允许的小数点位数。<br>89、tooltip.percentageDecimals：允许百分比的小数点后位数。<br>90、xAxis，yAxis配置设置坐标轴<br>91、allowDecimals：坐标轴上是否允许小数。<br>92、categories：是一个数组，坐标轴的分类。<br>93、plotLines：绘制主线。<br>94、tickColor：刻度颜色。<br>95、tickInterval：刻度的步进值。<br>96、labels.rotation：刻度标签旋转度数<br>chart：图表区选项</p>
<table>
<thead>
<tr>
<th>参数</th>
<th>描述</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>backgroundColor</td>
<td>设置图表区背景色</td>
<td>#FFFFFF</td>
</tr>
<tr>
<td>borderWidth</td>
<td>设置图表边框宽度</td>
<td>0</td>
</tr>
<tr>
<td>borderRadius</td>
<td>设置图表边框圆角角度</td>
<td>5</td>
</tr>
<tr>
<td>renderTo</td>
<td>图表放置的容器，一般在html中放置一个DIV，获取DIV的id属性值</td>
<td>null</td>
</tr>
<tr>
<td>defaultSeriesType</td>
<td>默认图表类型line, spline, area, areaspline, column, bar, pie , scatter</td>
<td>0</td>
</tr>
<tr>
<td>width</td>
<td>图表宽度，默认根据图表容器自适应宽度</td>
<td>null</td>
</tr>
<tr>
<td>height</td>
<td>图表高度，默认根据图表容器自适应高度</td>
<td>null</td>
</tr>
<tr>
<td>margin</td>
<td>设置图表与其他元素之间的间距，数组，如[0,0,0,0]</td>
<td>null</td>
</tr>
<tr>
<td>plotBackgroundColor</td>
<td>主图表区背景色，即X轴与Y轴围成的区域的背景色</td>
<td>null</td>
</tr>
<tr>
<td>plotBorderColor</td>
<td>主图表区边框的颜色，即X轴与Y轴围成的区域的边框颜色</td>
<td>null</td>
</tr>
<tr>
<td>plotBorderWidth</td>
<td>主图表区边框的宽度</td>
<td>0</td>
</tr>
<tr>
<td>shadow</td>
<td>是否设置阴影，需要设置背景色backgroundColor。</td>
<td>false</td>
</tr>
<tr>
<td>reflow</td>
<td>是否自使用图表区域高度和宽度，如果没有设置width和height时，会自适应大小。</td>
<td>true</td>
</tr>
<tr>
<td>zoomType</td>
<td>拖动鼠标进行缩放，沿x轴或y轴进行缩放，可以设置为：’x’,’y’,’xy’</td>
<td>“</td>
</tr>
<tr>
<td>events</td>
<td>事件回调，支持addSeries方法，click方法，load方法，selection方法等的回调函数。</td>
</tr>
</tbody>
</table>
<p>Color：颜色选项</p>
<table>
<thead>
<tr>
<th>参数</th>
<th>描述</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>color</td>
<td>用于展示图表，折线/柱状/饼状等图的颜色，数组形式。</td>
<td>array</td>
</tr>
</tbody>
</table>
<p>Highcharts已经默认提供了多种颜色方案，当要显示的图形多于颜色种类时，多出的图形会自动从第一种颜色方案开始选取。自定义颜色方案的方法：<br><figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">Highcharts.setOptions(&#123;</span><br><span class="line">    colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655',</span><br><span class="line">'#FFF263', '#6AF9C4']</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure></p>
<p>Title：标题选项</p>
<table>
<thead>
<tr>
<th>参数</th>
<th>描述</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>text</td>
<td>标题文本内容。</td>
<td>Chart title</td>
</tr>
<tr>
<td>align</td>
<td>水平对齐方式。</td>
<td>center</td>
</tr>
<tr>
<td>verticalAlign</td>
<td>垂直对齐方式。</td>
<td>top</td>
</tr>
<tr>
<td>margin</td>
<td>标题与副标题之间或者主图表区间的间距。</td>
<td>15</td>
</tr>
<tr>
<td>floating</td>
<td>是否浮动，如果为true，则标题可以偏离主图表区，可配合x,y属性使用。</td>
<td>false</td>
</tr>
<tr>
<td>style</td>
<td>设置CSS样式。</td>
<td>{color: ‘#3E576F’,</td>
</tr>
</tbody>
</table>
<p>fontSize: ‘16px’}|<br>Subtitle：副标题选项<br>副标题提供的属性选项与标题title大致相同，可参照上述标题选项，值得一提的是副标题的text选项默认为’’，即空的，所以默认情况下副标题不显示。<br>xAxis:X轴选项</p>
<table>
<thead>
<tr>
<th>参数</th>
<th>描述</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>categories</td>
<td>设置X轴分类名称，数组，例如：categories: [‘Apples’, ‘Bananas’, ‘Oranges’]</td>
<td>[]</td>
</tr>
<tr>
<td>title</td>
<td>X轴名称，支持text、enabled、align、rotation、style等属性</td>
<td></td>
</tr>
<tr>
<td>labels</td>
<td>设置X轴各分类名称的样式style，格式formatter，角度rotation等.</td>
<td>array</td>
</tr>
<tr>
<td>max</td>
<td>X轴最大值(categories为空时)，如果为null，则最大值会根据X轴数据自动匹配一个最大值。</td>
<td>null</td>
</tr>
<tr>
<td>min</td>
<td>X轴最小值(categories为空时)，如果为null，则最小值会根据X轴数据自动匹配一个最小值。</td>
<td>array</td>
</tr>
<tr>
<td>gridLineColor</td>
<td>网格（竖线）颜色</td>
<td>#C0C0C0</td>
</tr>
<tr>
<td>gridLineWidth</td>
<td>网格(竖线)宽度</td>
<td>1</td>
</tr>
<tr>
<td>lineColor</td>
<td>基线颜色</td>
<td>#C0D0E0</td>
</tr>
<tr>
<td>lineWidth</td>
<td>基线宽度</td>
<td>0</td>
</tr>
</tbody>
</table>
<p>yAxis：Y轴选项<br>Y轴选项与上述xAxis选项基本一致，请参照上表中的参数设置，不再单独列出。<br>Series：数据项选项<br>数据列选项用于设置图表中要展示的数据相关的属性</p>
<table>
<thead>
<tr>
<th>参数</th>
<th>描述</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
<td>显示在图表中的数据列，可以为数组或者JSON格式的数据。如：data:[0, 5, 3, 5]，或</td>
</tr>
</tbody>
</table>
<p>data: [{name: ‘Point 1’,y: 0}, {name: ‘Point 2’,y: 5}]|”|<br>|name|显示数据列的名称。|”|<br>|type|数据列类型，支持 area, areaspline, bar, column, line, pie, scatter or spline|line|<br>plotOptions:数据点选项</p>
<table>
<thead>
<tr>
<th>参数</th>
<th>描述</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>enabled</td>
<td>是否在数据点上直接显示数据</td>
<td>false</td>
</tr>
<tr>
<td>allowPointSelect</td>
<td>是否允许使用鼠标选中数据点</td>
<td>false</td>
</tr>
<tr>
<td>formatter</td>
<td>回调函数，格式化数据显示内容</td>
<td>formatter: function() {return this.y;}</td>
</tr>
</tbody>
</table>
<p>Tooltip：数据点提示框</p>
<table>
<thead>
<tr>
<th>参数</th>
<th>描述</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>enabled</td>
<td>是否显示提示框</td>
<td>true</td>
</tr>
<tr>
<td>backgroundColor</td>
<td>设置提示框的背景色</td>
<td>rgba(255, 255, 255, .85)</td>
</tr>
<tr>
<td>borderColor</td>
<td>提示框边框颜色，默认自动匹配数据列的颜色</td>
<td>auto</td>
</tr>
<tr>
<td>borderRadius</td>
<td>提示框圆角度</td>
<td>5</td>
</tr>
<tr>
<td>shadow</td>
<td>是否显示提示框阴影</td>
<td>true</td>
</tr>
<tr>
<td>style</td>
<td>设置提示框内容样式，如字体颜色等</td>
<td>color:’#333’</td>
</tr>
<tr>
<td>formatter</td>
<td>回调函数，用于格式化输出提示框的显示内容。返回的内容支持html标签如：<b>, <strong>, <i>, <em>, <br>, <span></span></em></i></strong></b></td>
<td>2</td>
</tr>
</tbody>
</table>
<p>Legend：图例选项</p>
<p>|参数|描述|默认值|<br>|layout|显示形式，支持水平horizontal和垂直vertical|horizontal|<br>|align|对齐方式。|center|<br>|backgroundColor|图例背景色。|null|<br>|borderColor|图例边框颜色。|#909090|<br>|borderRadius|图例边框角度|5|<br>|enabled|是否显示图例|true|<br>|floating|是否可以浮动，配合x，y属性。|false|<br>|shadow|是否显示阴影|false|<br>|style|    设置图例内容样式|”|</p>
<h3 id="曲线图示例"><a href="#曲线图示例" class="headerlink" title="曲线图示例"></a>曲线图示例</h3><p>以下均来自菜鸟教程<br>示例1基本曲线图：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>Highcharts 教程 | 菜鸟教程(runoob.com)<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"http://code.highcharts.com/highcharts.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"container"</span> <span class="attr">style</span>=<span class="string">"width: 550px; height: 400px; margin: 0 auto"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">language</span>=<span class="string">"JavaScript"</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> title = &#123;</span></span><br><span class="line"><span class="javascript">      text: <span class="string">'城市平均气温'</span>   </span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> subtitle = &#123;</span></span><br><span class="line"><span class="javascript">      text: <span class="string">'Source: runoob.com'</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> xAxis = &#123;</span></span><br><span class="line"><span class="javascript">      categories: [<span class="string">'Jan'</span>, <span class="string">'Feb'</span>, <span class="string">'Mar'</span>, <span class="string">'Apr'</span>, <span class="string">'May'</span>, <span class="string">'Jun'</span>,</span></span><br><span class="line"><span class="javascript">         <span class="string">'Jul'</span>, <span class="string">'Aug'</span>, <span class="string">'Sep'</span>, <span class="string">'Oct'</span>, <span class="string">'Nov'</span>, <span class="string">'Dec'</span>]</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> yAxis = &#123;</span></span><br><span class="line"><span class="undefined">      title: &#123;</span></span><br><span class="line"><span class="javascript">         text: <span class="string">'Temperature (\xB0C)'</span></span></span><br><span class="line"><span class="undefined">      &#125;,</span></span><br><span class="line"><span class="undefined">      plotLines: [&#123;</span></span><br><span class="line"><span class="undefined">         value: 0,</span></span><br><span class="line"><span class="undefined">         width: 1,</span></span><br><span class="line"><span class="javascript">         color: <span class="string">'#808080'</span></span></span><br><span class="line"><span class="undefined">      &#125;]</span></span><br><span class="line"><span class="undefined">   &#125;;   </span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> tooltip = &#123;</span></span><br><span class="line"><span class="javascript">      valueSuffix: <span class="string">'\xB0C'</span></span></span><br><span class="line"><span class="undefined">   &#125;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> legend = &#123;</span></span><br><span class="line"><span class="javascript">      layout: <span class="string">'vertical'</span>,</span></span><br><span class="line"><span class="javascript">      align: <span class="string">'right'</span>,</span></span><br><span class="line"><span class="javascript">      verticalAlign: <span class="string">'middle'</span>,</span></span><br><span class="line"><span class="undefined">      borderWidth: 0</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> series =  [</span></span><br><span class="line"><span class="undefined">      &#123;</span></span><br><span class="line"><span class="javascript">         name: <span class="string">'Tokyo'</span>,</span></span><br><span class="line"><span class="undefined">         data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,</span></span><br><span class="line"><span class="undefined">            26.5, 23.3, 18.3, 13.9, 9.6]</span></span><br><span class="line"><span class="undefined">      &#125;, </span></span><br><span class="line"><span class="undefined">      &#123;</span></span><br><span class="line"><span class="javascript">         name: <span class="string">'New York'</span>,</span></span><br><span class="line"><span class="undefined">         data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,</span></span><br><span class="line"><span class="undefined">            24.1, 20.1, 14.1, 8.6, 2.5]</span></span><br><span class="line"><span class="undefined">      &#125;,</span></span><br><span class="line"><span class="undefined">      &#123;</span></span><br><span class="line"><span class="javascript">         name: <span class="string">'London'</span>,</span></span><br><span class="line"><span class="undefined">         data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, </span></span><br><span class="line"><span class="undefined">            16.6, 14.2, 10.3, 6.6, 4.8]</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   ];</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> json = &#123;&#125;;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined">   json.title = title;</span></span><br><span class="line"><span class="undefined">   json.subtitle = subtitle;</span></span><br><span class="line"><span class="undefined">   json.xAxis = xAxis;</span></span><br><span class="line"><span class="undefined">   json.yAxis = yAxis;</span></span><br><span class="line"><span class="undefined">   json.tooltip = tooltip;</span></span><br><span class="line"><span class="undefined">   json.legend = legend;</span></span><br><span class="line"><span class="undefined">   json.series = series;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">   $(<span class="string">'#container'</span>).highcharts(json);</span></span><br><span class="line"><span class="undefined">&#125;);</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>示例2带有数据标签的曲线图:</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>Highcharts 教程 | 菜鸟教程(runoob.com)<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://code.highcharts.com/highcharts.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"container"</span> <span class="attr">style</span>=<span class="string">"width: 550px; height: 400px; margin: 0 auto"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">language</span>=<span class="string">"JavaScript"</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;   </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> title = &#123;</span></span><br><span class="line"><span class="javascript">      text: <span class="string">'每月平均温度'</span>   </span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> subtitle = &#123;</span></span><br><span class="line"><span class="javascript">      text: <span class="string">'Source: runoob.com'</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> xAxis = &#123;</span></span><br><span class="line"><span class="javascript">      categories: [<span class="string">'Jan'</span>, <span class="string">'Feb'</span>, <span class="string">'Mar'</span>, <span class="string">'Apr'</span>, <span class="string">'May'</span>, <span class="string">'Jun'</span>,</span></span><br><span class="line"><span class="javascript">         <span class="string">'Jul'</span>, <span class="string">'Aug'</span>, <span class="string">'Sep'</span>, <span class="string">'Oct'</span>, <span class="string">'Nov'</span>, <span class="string">'Dec'</span>]</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> yAxis = &#123;</span></span><br><span class="line"><span class="undefined">      title: &#123;</span></span><br><span class="line"><span class="javascript">         text: <span class="string">'Temperature (\xB0C)'</span></span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> plotOptions = &#123;</span></span><br><span class="line"><span class="undefined">      line: &#123;</span></span><br><span class="line"><span class="undefined">         dataLabels: &#123;</span></span><br><span class="line"><span class="javascript">            enabled: <span class="literal">true</span></span></span><br><span class="line"><span class="undefined">         &#125;</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> series= [&#123;</span></span><br><span class="line"><span class="javascript">         name: <span class="string">'Tokyo'</span>,</span></span><br><span class="line"><span class="undefined">         data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]</span></span><br><span class="line"><span class="undefined">      &#125;, &#123;</span></span><br><span class="line"><span class="javascript">         name: <span class="string">'London'</span>,</span></span><br><span class="line"><span class="undefined">         data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   ];</span></span><br><span class="line"><span class="undefined">   </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> json = &#123;&#125;;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined">   json.title = title;</span></span><br><span class="line"><span class="undefined">   json.subtitle = subtitle;</span></span><br><span class="line"><span class="undefined">   json.xAxis = xAxis;</span></span><br><span class="line"><span class="undefined">   json.yAxis = yAxis;  </span></span><br><span class="line"><span class="undefined">   json.series = series;</span></span><br><span class="line"><span class="undefined">   json.plotOptions = plotOptions;</span></span><br><span class="line"><span class="javascript">   $(<span class="string">'#container'</span>).highcharts(json);</span></span><br><span class="line"><span class="undefined">  </span></span><br><span class="line"><span class="undefined">&#125;);</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>示例3时间序列可缩放的图表</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>Highcharts 教程 | 菜鸟教程(runoob.com)<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://code.highcharts.com/highcharts.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"container"</span> <span class="attr">style</span>=<span class="string">"width: 550px; height: 400px; margin: 0 auto"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">language</span>=<span class="string">"JavaScript"</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;  </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> chart = &#123;</span></span><br><span class="line"><span class="javascript">      zoomType: <span class="string">'x'</span></span></span><br><span class="line"><span class="undefined">   &#125;; </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> title = &#123;</span></span><br><span class="line"><span class="javascript">      text: <span class="string">'USD to EUR exchange rate from 2006 through 2008'</span>   </span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> subtitle = &#123;</span></span><br><span class="line"><span class="javascript">      text: <span class="built_in">document</span>.ontouchstart === <span class="literal">undefined</span> ?</span></span><br><span class="line"><span class="javascript">                    <span class="string">'Click and drag in the plot area to zoom in'</span> :</span></span><br><span class="line"><span class="javascript">                    <span class="string">'Pinch the chart to zoom in'</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> xAxis = &#123;</span></span><br><span class="line"><span class="javascript">      type: <span class="string">'datetime'</span>,</span></span><br><span class="line"><span class="javascript">      minRange: <span class="number">14</span> * <span class="number">24</span> * <span class="number">3600000</span> <span class="comment">// 14 天</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> yAxis = &#123;</span></span><br><span class="line"><span class="undefined">      title: &#123;</span></span><br><span class="line"><span class="javascript">         text: <span class="string">'Exchange rate'</span></span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> legend = &#123;</span></span><br><span class="line"><span class="javascript">      enabled: <span class="literal">false</span> </span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> plotOptions = &#123;</span></span><br><span class="line"><span class="undefined">      area: &#123;</span></span><br><span class="line"><span class="undefined">         fillColor: &#123;</span></span><br><span class="line"><span class="undefined">            linearGradient: &#123; x1: 0, y1: 0, x2: 0, y2: 1&#125;,</span></span><br><span class="line"><span class="undefined">            stops: [</span></span><br><span class="line"><span class="undefined">               [0, Highcharts.getOptions().colors[0]],</span></span><br><span class="line"><span class="javascript">               [<span class="number">1</span>, Highcharts.Color(Highcharts.getOptions().colors[<span class="number">0</span>]).setOpacity(<span class="number">0</span>).get(<span class="string">'rgba'</span>)]</span></span><br><span class="line"><span class="undefined">            ]</span></span><br><span class="line"><span class="undefined">         &#125;,</span></span><br><span class="line"><span class="undefined">         marker: &#123;</span></span><br><span class="line"><span class="undefined">            radius: 2</span></span><br><span class="line"><span class="undefined">         &#125;,</span></span><br><span class="line"><span class="undefined">         lineWidth: 1,</span></span><br><span class="line"><span class="undefined">         states: &#123;</span></span><br><span class="line"><span class="undefined">            hover: &#123;</span></span><br><span class="line"><span class="undefined">               lineWidth: 1</span></span><br><span class="line"><span class="undefined">            &#125;</span></span><br><span class="line"><span class="undefined">         &#125;,</span></span><br><span class="line"><span class="javascript">         threshold: <span class="literal">null</span></span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> series= [&#123;</span></span><br><span class="line"><span class="javascript">      type: <span class="string">'area'</span>,</span></span><br><span class="line"><span class="javascript">      name: <span class="string">'USD to EUR'</span>,</span></span><br><span class="line"><span class="undefined">      pointInterval: 24 * 3600 * 1000,</span></span><br><span class="line"><span class="javascript">      pointStart: <span class="built_in">Date</span>.UTC(<span class="number">2006</span>, <span class="number">0</span>, <span class="number">1</span>),</span></span><br><span class="line"><span class="undefined">      data: [</span></span><br><span class="line"><span class="undefined">         0.8446, 0.8445, 0.8444, 0.8451,    0.8418, 0.8264,    0.8258, 0.8232,    0.8233, 0.8258,</span></span><br><span class="line"><span class="undefined">         0.8283, 0.8278, 0.8256, 0.8292,    0.8239, 0.8239,    0.8245, 0.8265,    0.8261, 0.8269,</span></span><br><span class="line"><span class="undefined">         0.8273, 0.8244, 0.8244, 0.8172,    0.8139, 0.8146,    0.8164, 0.82,    0.8269, 0.8269,</span></span><br><span class="line"><span class="undefined">         0.8269, 0.8258, 0.8247, 0.8286,    0.8289, 0.8316,    0.832, 0.8333,    0.8352, 0.8357,</span></span><br><span class="line"><span class="undefined">         0.8355, 0.8354, 0.8403, 0.8403,    0.8406, 0.8403,    0.8396, 0.8418,    0.8409, 0.8384,</span></span><br><span class="line"><span class="undefined">         0.8386, 0.8372, 0.839, 0.84, 0.8389, 0.84, 0.8423, 0.8423, 0.8435, 0.8422,</span></span><br><span class="line"><span class="undefined">         0.838, 0.8373, 0.8316, 0.8303,    0.8303, 0.8302,    0.8369, 0.84, 0.8385, 0.84,</span></span><br><span class="line"><span class="undefined">         0.8401, 0.8402, 0.8381, 0.8351,    0.8314, 0.8273,    0.8213, 0.8207,    0.8207, 0.8215,</span></span><br><span class="line"><span class="undefined">         0.8242, 0.8273, 0.8301, 0.8346,    0.8312, 0.8312,    0.8312, 0.8306,    0.8327, 0.8282,</span></span><br><span class="line"><span class="undefined">         0.824, 0.8255, 0.8256, 0.8273, 0.8209, 0.8151, 0.8149, 0.8213, 0.8273, 0.8273,</span></span><br><span class="line"><span class="undefined">         0.8261, 0.8252, 0.824, 0.8262, 0.8258, 0.8261, 0.826, 0.8199, 0.8153, 0.8097,</span></span><br><span class="line"><span class="undefined">         0.8101, 0.8119, 0.8107, 0.8105,    0.8084, 0.8069,    0.8047, 0.8023,    0.7965, 0.7919,</span></span><br><span class="line"><span class="undefined">         0.7921, 0.7922, 0.7934, 0.7918,    0.7915, 0.787, 0.7861, 0.7861, 0.7853, 0.7867,</span></span><br><span class="line"><span class="undefined">         0.7827, 0.7834, 0.7766, 0.7751, 0.7739, 0.7767, 0.7802, 0.7788, 0.7828, 0.7816,</span></span><br><span class="line"><span class="undefined">         0.7829, 0.783, 0.7829, 0.7781, 0.7811, 0.7831, 0.7826, 0.7855, 0.7855, 0.7845,</span></span><br><span class="line"><span class="undefined">         0.7798, 0.7777, 0.7822, 0.7785, 0.7744, 0.7743, 0.7726, 0.7766, 0.7806, 0.785,</span></span><br><span class="line"><span class="undefined">         0.7907, 0.7912, 0.7913, 0.7931, 0.7952, 0.7951, 0.7928, 0.791, 0.7913, 0.7912,</span></span><br><span class="line"><span class="undefined">         0.7941, 0.7953, 0.7921, 0.7919, 0.7968, 0.7999, 0.7999, 0.7974, 0.7942, 0.796,</span></span><br><span class="line"><span class="undefined">         0.7969, 0.7862, 0.7821, 0.7821, 0.7821, 0.7811, 0.7833, 0.7849, 0.7819, 0.7809,</span></span><br><span class="line"><span class="undefined">         0.7809, 0.7827, 0.7848, 0.785, 0.7873, 0.7894, 0.7907, 0.7909, 0.7947, 0.7987,</span></span><br><span class="line"><span class="undefined">         0.799, 0.7927, 0.79, 0.7878, 0.7878, 0.7907, 0.7922, 0.7937, 0.786, 0.787,</span></span><br><span class="line"><span class="undefined">         0.7838, 0.7838, 0.7837, 0.7836, 0.7806, 0.7825, 0.7798, 0.777, 0.777, 0.7772,</span></span><br><span class="line"><span class="undefined">         0.7793, 0.7788, 0.7785, 0.7832, 0.7865, 0.7865, 0.7853, 0.7847, 0.7809, 0.778,</span></span><br><span class="line"><span class="undefined">         0.7799, 0.78, 0.7801, 0.7765, 0.7785, 0.7811, 0.782, 0.7835, 0.7845, 0.7844,</span></span><br><span class="line"><span class="undefined">         0.782, 0.7811, 0.7795, 0.7794, 0.7806, 0.7794, 0.7794, 0.7778, 0.7793, 0.7808,</span></span><br><span class="line"><span class="undefined">         0.7824, 0.787, 0.7894, 0.7893, 0.7882, 0.7871, 0.7882, 0.7871, 0.7878, 0.79,</span></span><br><span class="line"><span class="undefined">         0.7901, 0.7898, 0.7879, 0.7886, 0.7858, 0.7814, 0.7825, 0.7826, 0.7826, 0.786,</span></span><br><span class="line"><span class="undefined">         0.7878, 0.7868, 0.7883, 0.7893, 0.7892, 0.7876, 0.785, 0.787, 0.7873, 0.7901,</span></span><br><span class="line"><span class="undefined">         0.7936, 0.7939, 0.7938, 0.7956, 0.7975, 0.7978, 0.7972, 0.7995, 0.7995, 0.7994,</span></span><br><span class="line"><span class="undefined">         0.7976, 0.7977, 0.796, 0.7922, 0.7928, 0.7929, 0.7948, 0.797, 0.7953, 0.7907,</span></span><br><span class="line"><span class="undefined">         0.7872, 0.7852, 0.7852, 0.786, 0.7862, 0.7836, 0.7837, 0.784, 0.7867, 0.7867,</span></span><br><span class="line"><span class="undefined">         0.7869, 0.7837, 0.7827, 0.7825, 0.7779, 0.7791, 0.779, 0.7787, 0.78, 0.7807,</span></span><br><span class="line"><span class="undefined">         0.7803, 0.7817, 0.7799, 0.7799, 0.7795, 0.7801, 0.7765, 0.7725, 0.7683, 0.7641,</span></span><br><span class="line"><span class="undefined">         0.7639, 0.7616, 0.7608, 0.759, 0.7582, 0.7539, 0.75, 0.75, 0.7507, 0.7505,</span></span><br><span class="line"><span class="undefined">         0.7516, 0.7522, 0.7531, 0.7577, 0.7577, 0.7582, 0.755, 0.7542, 0.7576, 0.7616,</span></span><br><span class="line"><span class="undefined">         0.7648, 0.7648, 0.7641, 0.7614, 0.757, 0.7587, 0.7588, 0.762, 0.762, 0.7617,</span></span><br><span class="line"><span class="undefined">         0.7618, 0.7615, 0.7612, 0.7596, 0.758, 0.758, 0.758, 0.7547, 0.7549, 0.7613,</span></span><br><span class="line"><span class="undefined">         0.7655, 0.7693, 0.7694, 0.7688, 0.7678, 0.7708, 0.7727, 0.7749, 0.7741, 0.7741,</span></span><br><span class="line"><span class="undefined">         0.7732, 0.7727, 0.7737, 0.7724, 0.7712, 0.772, 0.7721, 0.7717, 0.7704, 0.769,</span></span><br><span class="line"><span class="undefined">         0.7711, 0.774, 0.7745, 0.7745, 0.774, 0.7716, 0.7713, 0.7678, 0.7688, 0.7718,</span></span><br><span class="line"><span class="undefined">         0.7718, 0.7728, 0.7729, 0.7698, 0.7685, 0.7681, 0.769, 0.769, 0.7698, 0.7699,</span></span><br><span class="line"><span class="undefined">         0.7651, 0.7613, 0.7616, 0.7614, 0.7614, 0.7607, 0.7602, 0.7611, 0.7622, 0.7615,</span></span><br><span class="line"><span class="undefined">         0.7598, 0.7598, 0.7592, 0.7573, 0.7566, 0.7567, 0.7591, 0.7582, 0.7585, 0.7613,</span></span><br><span class="line"><span class="undefined">         0.7631, 0.7615, 0.76, 0.7613, 0.7627, 0.7627, 0.7608, 0.7583, 0.7575, 0.7562,</span></span><br><span class="line"><span class="undefined">         0.752, 0.7512, 0.7512, 0.7517, 0.752, 0.7511, 0.748, 0.7509, 0.7531, 0.7531,</span></span><br><span class="line"><span class="undefined">         0.7527, 0.7498, 0.7493, 0.7504, 0.75, 0.7491, 0.7491, 0.7485, 0.7484, 0.7492,</span></span><br><span class="line"><span class="undefined">         0.7471, 0.7459, 0.7477, 0.7477, 0.7483, 0.7458, 0.7448, 0.743, 0.7399, 0.7395,</span></span><br><span class="line"><span class="undefined">         0.7395, 0.7378, 0.7382, 0.7362, 0.7355, 0.7348, 0.7361, 0.7361, 0.7365, 0.7362,</span></span><br><span class="line"><span class="undefined">         0.7331, 0.7339, 0.7344, 0.7327, 0.7327, 0.7336, 0.7333, 0.7359, 0.7359, 0.7372,</span></span><br><span class="line"><span class="undefined">         0.736, 0.736, 0.735, 0.7365, 0.7384, 0.7395, 0.7413, 0.7397, 0.7396, 0.7385,</span></span><br><span class="line"><span class="undefined">         0.7378, 0.7366, 0.74, 0.7411, 0.7406, 0.7405, 0.7414, 0.7431, 0.7431, 0.7438,</span></span><br><span class="line"><span class="undefined">         0.7443, 0.7443, 0.7443, 0.7434, 0.7429, 0.7442, 0.744, 0.7439, 0.7437, 0.7437,</span></span><br><span class="line"><span class="undefined">         0.7429, 0.7403, 0.7399, 0.7418, 0.7468, 0.748, 0.748, 0.749, 0.7494, 0.7522,</span></span><br><span class="line"><span class="undefined">         0.7515, 0.7502, 0.7472, 0.7472, 0.7462, 0.7455, 0.7449, 0.7467, 0.7458, 0.7427,</span></span><br><span class="line"><span class="undefined">         0.7427, 0.743, 0.7429, 0.744, 0.743, 0.7422, 0.7388, 0.7388, 0.7369, 0.7345,</span></span><br><span class="line"><span class="undefined">         0.7345, 0.7345, 0.7352, 0.7341, 0.7341, 0.734, 0.7324, 0.7272, 0.7264, 0.7255,</span></span><br><span class="line"><span class="undefined">         0.7258, 0.7258, 0.7256, 0.7257, 0.7247, 0.7243, 0.7244, 0.7235, 0.7235, 0.7235,</span></span><br><span class="line"><span class="undefined">         0.7235, 0.7262, 0.7288, 0.7301, 0.7337, 0.7337, 0.7324, 0.7297, 0.7317, 0.7315,</span></span><br><span class="line"><span class="undefined">         0.7288, 0.7263, 0.7263, 0.7242, 0.7253, 0.7264, 0.727, 0.7312, 0.7305, 0.7305,</span></span><br><span class="line"><span class="undefined">         0.7318, 0.7358, 0.7409, 0.7454, 0.7437, 0.7424, 0.7424, 0.7415, 0.7419, 0.7414,</span></span><br><span class="line"><span class="undefined">         0.7377, 0.7355, 0.7315, 0.7315, 0.732, 0.7332, 0.7346, 0.7328, 0.7323, 0.734,</span></span><br><span class="line"><span class="undefined">         0.734, 0.7336, 0.7351, 0.7346, 0.7321, 0.7294, 0.7266, 0.7266, 0.7254, 0.7242,</span></span><br><span class="line"><span class="undefined">         0.7213, 0.7197, 0.7209, 0.721, 0.721, 0.721, 0.7209, 0.7159, 0.7133, 0.7105,</span></span><br><span class="line"><span class="undefined">         0.7099, 0.7099, 0.7093, 0.7093, 0.7076, 0.707, 0.7049, 0.7012, 0.7011, 0.7019,</span></span><br><span class="line"><span class="undefined">         0.7046, 0.7063, 0.7089, 0.7077, 0.7077, 0.7077, 0.7091, 0.7118, 0.7079, 0.7053,</span></span><br><span class="line"><span class="undefined">         0.705, 0.7055, 0.7055, 0.7045, 0.7051, 0.7051, 0.7017, 0.7, 0.6995, 0.6994,</span></span><br><span class="line"><span class="undefined">         0.7014, 0.7036, 0.7021, 0.7002, 0.6967, 0.695, 0.695, 0.6939, 0.694, 0.6922,</span></span><br><span class="line"><span class="undefined">         0.6919, 0.6914, 0.6894, 0.6891, 0.6904, 0.689, 0.6834, 0.6823, 0.6807, 0.6815,</span></span><br><span class="line"><span class="undefined">         0.6815, 0.6847, 0.6859, 0.6822, 0.6827, 0.6837, 0.6823, 0.6822, 0.6822, 0.6792,</span></span><br><span class="line"><span class="undefined">         0.6746, 0.6735, 0.6731, 0.6742, 0.6744, 0.6739, 0.6731, 0.6761, 0.6761, 0.6785,</span></span><br><span class="line"><span class="undefined">         0.6818, 0.6836, 0.6823, 0.6805, 0.6793, 0.6849, 0.6833, 0.6825, 0.6825, 0.6816,</span></span><br><span class="line"><span class="undefined">         0.6799, 0.6813, 0.6809, 0.6868, 0.6933, 0.6933, 0.6945, 0.6944, 0.6946, 0.6964,</span></span><br><span class="line"><span class="undefined">         0.6965, 0.6956, 0.6956, 0.695, 0.6948, 0.6928, 0.6887, 0.6824, 0.6794, 0.6794,</span></span><br><span class="line"><span class="undefined">         0.6803, 0.6855, 0.6824, 0.6791, 0.6783, 0.6785, 0.6785, 0.6797, 0.68, 0.6803,</span></span><br><span class="line"><span class="undefined">         0.6805, 0.676, 0.677, 0.677, 0.6736, 0.6726, 0.6764, 0.6821, 0.6831, 0.6842,</span></span><br><span class="line"><span class="undefined">         0.6842, 0.6887, 0.6903, 0.6848, 0.6824, 0.6788, 0.6814, 0.6814, 0.6797, 0.6769,</span></span><br><span class="line"><span class="undefined">         0.6765, 0.6733, 0.6729, 0.6758, 0.6758, 0.675, 0.678, 0.6833, 0.6856, 0.6903,</span></span><br><span class="line"><span class="undefined">         0.6896, 0.6896, 0.6882, 0.6879, 0.6862, 0.6852, 0.6823, 0.6813, 0.6813, 0.6822,</span></span><br><span class="line"><span class="undefined">         0.6802, 0.6802, 0.6784, 0.6748, 0.6747, 0.6747, 0.6748, 0.6733, 0.665, 0.6611,</span></span><br><span class="line"><span class="undefined">         0.6583, 0.659, 0.659, 0.6581, 0.6578, 0.6574, 0.6532, 0.6502, 0.6514, 0.6514,</span></span><br><span class="line"><span class="undefined">         0.6507, 0.651, 0.6489, 0.6424, 0.6406, 0.6382, 0.6382, 0.6341, 0.6344, 0.6378,</span></span><br><span class="line"><span class="undefined">         0.6439, 0.6478, 0.6481, 0.6481, 0.6494, 0.6438, 0.6377, 0.6329, 0.6336, 0.6333,</span></span><br><span class="line"><span class="undefined">         0.6333, 0.633, 0.6371, 0.6403, 0.6396, 0.6364, 0.6356, 0.6356, 0.6368, 0.6357,</span></span><br><span class="line"><span class="undefined">         0.6354, 0.632, 0.6332, 0.6328, 0.6331, 0.6342, 0.6321, 0.6302, 0.6278, 0.6308,</span></span><br><span class="line"><span class="undefined">         0.6324, 0.6324, 0.6307, 0.6277, 0.6269, 0.6335, 0.6392, 0.64, 0.6401, 0.6396,</span></span><br><span class="line"><span class="undefined">         0.6407, 0.6423, 0.6429, 0.6472, 0.6485, 0.6486, 0.6467, 0.6444, 0.6467, 0.6509,</span></span><br><span class="line"><span class="undefined">         0.6478, 0.6461, 0.6461, 0.6468, 0.6449, 0.647, 0.6461, 0.6452, 0.6422, 0.6422,</span></span><br><span class="line"><span class="undefined">         0.6425, 0.6414, 0.6366, 0.6346, 0.635, 0.6346, 0.6346, 0.6343, 0.6346, 0.6379,</span></span><br><span class="line"><span class="undefined">         0.6416, 0.6442, 0.6431, 0.6431, 0.6435, 0.644, 0.6473, 0.6469, 0.6386, 0.6356,</span></span><br><span class="line"><span class="undefined">         0.634, 0.6346, 0.643, 0.6452, 0.6467, 0.6506, 0.6504, 0.6503, 0.6481, 0.6451,</span></span><br><span class="line"><span class="undefined">         0.645, 0.6441, 0.6414, 0.6409, 0.6409, 0.6428, 0.6431, 0.6418, 0.6371, 0.6349,</span></span><br><span class="line"><span class="undefined">         0.6333, 0.6334, 0.6338, 0.6342, 0.632, 0.6318, 0.637, 0.6368, 0.6368, 0.6383,</span></span><br><span class="line"><span class="undefined">         0.6371, 0.6371, 0.6355, 0.632, 0.6277, 0.6276, 0.6291, 0.6274, 0.6293, 0.6311,</span></span><br><span class="line"><span class="undefined">         0.631, 0.6312, 0.6312, 0.6304, 0.6294, 0.6348, 0.6378, 0.6368, 0.6368, 0.6368,</span></span><br><span class="line"><span class="undefined">         0.636, 0.637, 0.6418, 0.6411, 0.6435, 0.6427, 0.6427, 0.6419, 0.6446, 0.6468,</span></span><br><span class="line"><span class="undefined">         0.6487, 0.6594, 0.6666, 0.6666, 0.6678, 0.6712, 0.6705, 0.6718, 0.6784, 0.6811,</span></span><br><span class="line"><span class="undefined">         0.6811, 0.6794, 0.6804, 0.6781, 0.6756, 0.6735, 0.6763, 0.6762, 0.6777, 0.6815,</span></span><br><span class="line"><span class="undefined">         0.6802, 0.678, 0.6796, 0.6817, 0.6817, 0.6832, 0.6877, 0.6912, 0.6914, 0.7009,</span></span><br><span class="line"><span class="undefined">         0.7012, 0.701, 0.7005, 0.7076, 0.7087, 0.717, 0.7105, 0.7031, 0.7029, 0.7006,</span></span><br><span class="line"><span class="undefined">         0.7035, 0.7045, 0.6956, 0.6988, 0.6915, 0.6914, 0.6859, 0.6778, 0.6815, 0.6815,</span></span><br><span class="line"><span class="undefined">         0.6843, 0.6846, 0.6846, 0.6923, 0.6997, 0.7098, 0.7188, 0.7232, 0.7262, 0.7266,</span></span><br><span class="line"><span class="undefined">         0.7359, 0.7368, 0.7337, 0.7317, 0.7387, 0.7467, 0.7461, 0.7366, 0.7319, 0.7361,</span></span><br><span class="line"><span class="undefined">         0.7437, 0.7432, 0.7461, 0.7461, 0.7454, 0.7549, 0.7742, 0.7801, 0.7903, 0.7876,</span></span><br><span class="line"><span class="undefined">         0.7928, 0.7991, 0.8007, 0.7823, 0.7661, 0.785, 0.7863, 0.7862, 0.7821, 0.7858,</span></span><br><span class="line"><span class="undefined">         0.7731, 0.7779, 0.7844, 0.7866, 0.7864, 0.7788, 0.7875, 0.7971, 0.8004, 0.7857,</span></span><br><span class="line"><span class="undefined">         0.7932, 0.7938, 0.7927, 0.7918, 0.7919, 0.7989, 0.7988, 0.7949, 0.7948, 0.7882,</span></span><br><span class="line"><span class="undefined">         0.7745, 0.771, 0.775, 0.7791, 0.7882, 0.7882, 0.7899, 0.7905, 0.7889, 0.7879,</span></span><br><span class="line"><span class="undefined">         0.7855, 0.7866, 0.7865, 0.7795, 0.7758, 0.7717, 0.761, 0.7497, 0.7471, 0.7473,</span></span><br><span class="line"><span class="undefined">         0.7407, 0.7288, 0.7074, 0.6927, 0.7083, 0.7191, 0.719, 0.7153, 0.7156, 0.7158,</span></span><br><span class="line"><span class="undefined">         0.714, 0.7119, 0.7129, 0.7129, 0.7049, 0.7095</span></span><br><span class="line"><span class="undefined">         ]</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   ];</span></span><br><span class="line"><span class="undefined">   </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> json = &#123;&#125;;</span></span><br><span class="line"><span class="undefined">   json.chart = chart;</span></span><br><span class="line"><span class="undefined">   json.title = title;</span></span><br><span class="line"><span class="undefined">   json.subtitle = subtitle;</span></span><br><span class="line"><span class="undefined">   json.legend = legend;</span></span><br><span class="line"><span class="undefined">   json.xAxis = xAxis;</span></span><br><span class="line"><span class="undefined">   json.yAxis = yAxis;  </span></span><br><span class="line"><span class="undefined">   json.series = series;</span></span><br><span class="line"><span class="undefined">   json.plotOptions = plotOptions;</span></span><br><span class="line"><span class="javascript">   $(<span class="string">'#container'</span>).highcharts(json);</span></span><br><span class="line"><span class="undefined">  </span></span><br><span class="line"><span class="undefined">&#125;);</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>示例四X轴翻转曲线</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>Highcharts 教程 | 菜鸟教程(runoob.com)<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://code.highcharts.com/highcharts.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"container"</span> <span class="attr">style</span>=<span class="string">"width: 550px; height: 400px; margin: 0 auto"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">language</span>=<span class="string">"JavaScript"</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;  </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> chart = &#123;</span></span><br><span class="line"><span class="javascript">      type: <span class="string">'spline'</span>,</span></span><br><span class="line"><span class="javascript">      inverted: <span class="literal">true</span></span></span><br><span class="line"><span class="undefined">   &#125;; </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> title = &#123;</span></span><br><span class="line"><span class="javascript">      text: <span class="string">'Atmosphere Temperature by Altitude'</span>   </span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> subtitle = &#123;</span></span><br><span class="line"><span class="javascript">      text: <span class="string">'According to the Standard Atmosphere Model'</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> xAxis = &#123;</span></span><br><span class="line"><span class="javascript">      reversed: <span class="literal">false</span>,</span></span><br><span class="line"><span class="undefined">      title: &#123;</span></span><br><span class="line"><span class="javascript">         enabled: <span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript">         text: <span class="string">'Altitude'</span></span></span><br><span class="line"><span class="undefined">      &#125;,</span></span><br><span class="line"><span class="undefined">      labels: &#123;</span></span><br><span class="line"><span class="javascript">         formatter: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">            <span class="keyword">return</span> <span class="keyword">this</span>.value + <span class="string">'km'</span>;</span></span><br><span class="line"><span class="undefined">         &#125;</span></span><br><span class="line"><span class="undefined">      &#125;,</span></span><br><span class="line"><span class="undefined">      maxPadding: 0.05,</span></span><br><span class="line"><span class="javascript">      showLastLabel: <span class="literal">true</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> yAxis = &#123;</span></span><br><span class="line"><span class="undefined">      title: &#123;</span></span><br><span class="line"><span class="javascript">         text: <span class="string">'Temperature'</span></span></span><br><span class="line"><span class="undefined">      &#125;,</span></span><br><span class="line"><span class="undefined">      labels: &#123;</span></span><br><span class="line"><span class="javascript">         formatter: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">            <span class="keyword">return</span> <span class="keyword">this</span>.value + <span class="string">'\xB0'</span>;</span></span><br><span class="line"><span class="undefined">         &#125;</span></span><br><span class="line"><span class="undefined">      &#125;,</span></span><br><span class="line"><span class="undefined">      lineWidth: 2</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> legend = &#123;</span></span><br><span class="line"><span class="javascript">      enabled: <span class="literal">false</span> </span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> tooltip = &#123;</span></span><br><span class="line"><span class="xml">      headerFormat: '<span class="tag">&lt;<span class="name">b</span>&gt;</span>&#123;series.name&#125;<span class="tag">&lt;/<span class="name">b</span>&gt;</span><span class="tag">&lt;<span class="name">br</span>/&gt;</span>',</span></span><br><span class="line"><span class="javascript">      pointFormat: <span class="string">'&#123;point.x&#125; km: &#123;point.y&#125;\xB0C'</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> plotOptions = &#123;</span></span><br><span class="line"><span class="undefined">      spline: &#123;</span></span><br><span class="line"><span class="undefined">         marker: &#123;</span></span><br><span class="line"><span class="javascript">            enable: <span class="literal">false</span></span></span><br><span class="line"><span class="undefined">         &#125;</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> series= [&#123;</span></span><br><span class="line"><span class="javascript">      name: <span class="string">'Temperature'</span>,</span></span><br><span class="line"><span class="undefined">      data: [[0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1],</span></span><br><span class="line"><span class="undefined">            [50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]]</span></span><br><span class="line"><span class="undefined">   &#125;];      </span></span><br><span class="line"><span class="undefined">   </span></span><br><span class="line"><span class="undefined">   </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> json = &#123;&#125;;</span></span><br><span class="line"><span class="undefined">   json.chart = chart;</span></span><br><span class="line"><span class="undefined">   json.title = title;</span></span><br><span class="line"><span class="undefined">   json.subtitle = subtitle;</span></span><br><span class="line"><span class="undefined">   json.legend = legend;</span></span><br><span class="line"><span class="undefined">   json.tooltip = tooltip;</span></span><br><span class="line"><span class="undefined">   json.xAxis = xAxis;</span></span><br><span class="line"><span class="undefined">   json.yAxis = yAxis;  </span></span><br><span class="line"><span class="undefined">   json.series = series;</span></span><br><span class="line"><span class="undefined">   json.plotOptions = plotOptions;</span></span><br><span class="line"><span class="javascript">   $(<span class="string">'#container'</span>).highcharts(json);</span></span><br><span class="line"><span class="undefined">  </span></span><br><span class="line"><span class="undefined">&#125;);</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>示例五带标记曲线图</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>Highcharts 教程 | 菜鸟教程(runoob.com)<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://code.highcharts.com/highcharts.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"container"</span> <span class="attr">style</span>=<span class="string">"width: 550px; height: 400px; margin: 0 auto"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">language</span>=<span class="string">"JavaScript"</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;  </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> chart = &#123;</span></span><br><span class="line"><span class="javascript">      type: <span class="string">'spline'</span>      </span></span><br><span class="line"><span class="undefined">   &#125;; </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> title = &#123;</span></span><br><span class="line"><span class="javascript">      text: <span class="string">'Monthly Average Temperature'</span>   </span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> subtitle = &#123;</span></span><br><span class="line"><span class="javascript">      text: <span class="string">'Source: WorldClimate.com'</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> xAxis = &#123;</span></span><br><span class="line"><span class="javascript">      categories: [<span class="string">'Jan'</span>, <span class="string">'Feb'</span>, <span class="string">'Mar'</span>, <span class="string">'Apr'</span>, <span class="string">'May'</span>, <span class="string">'Jun'</span>,</span></span><br><span class="line"><span class="javascript">         <span class="string">'Jul'</span>, <span class="string">'Aug'</span>, <span class="string">'Sep'</span>, <span class="string">'Oct'</span>, <span class="string">'Nov'</span>, <span class="string">'Dec'</span>]</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> yAxis = &#123;</span></span><br><span class="line"><span class="undefined">      title: &#123;</span></span><br><span class="line"><span class="javascript">         text: <span class="string">'Temperature'</span></span></span><br><span class="line"><span class="undefined">      &#125;,</span></span><br><span class="line"><span class="undefined">      labels: &#123;</span></span><br><span class="line"><span class="javascript">         formatter: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">            <span class="keyword">return</span> <span class="keyword">this</span>.value + <span class="string">'\xB0'</span>;</span></span><br><span class="line"><span class="undefined">         &#125;</span></span><br><span class="line"><span class="undefined">      &#125;,</span></span><br><span class="line"><span class="undefined">      lineWidth: 2</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> tooltip = &#123;</span></span><br><span class="line"><span class="javascript">      crosshairs: <span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript">      shared: <span class="literal">true</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> plotOptions = &#123;</span></span><br><span class="line"><span class="undefined">      spline: &#123;</span></span><br><span class="line"><span class="undefined">         marker: &#123;</span></span><br><span class="line"><span class="undefined">            radius: 4,</span></span><br><span class="line"><span class="javascript">            lineColor: <span class="string">'#666666'</span>,</span></span><br><span class="line"><span class="undefined">            lineWidth: 1</span></span><br><span class="line"><span class="undefined">         &#125;</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> series= [&#123;</span></span><br><span class="line"><span class="javascript">         name: <span class="string">'Tokyo'</span>,</span></span><br><span class="line"><span class="undefined">         marker: &#123;</span></span><br><span class="line"><span class="javascript">            symbol: <span class="string">'square'</span></span></span><br><span class="line"><span class="undefined">         &#125;,</span></span><br><span class="line"><span class="undefined">         data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, &#123;</span></span><br><span class="line"><span class="undefined">            y: 26.5,</span></span><br><span class="line"><span class="undefined">            marker: &#123;</span></span><br><span class="line"><span class="javascript">               symbol: <span class="string">'url(http://www.highcharts.com/demo/gfx/sun.png)'</span></span></span><br><span class="line"><span class="undefined">            &#125;</span></span><br><span class="line"><span class="undefined">         &#125;, 23.3, 18.3, 13.9, 9.6]</span></span><br><span class="line"><span class="undefined">      &#125;, &#123;</span></span><br><span class="line"><span class="javascript">         name: <span class="string">'London'</span>,</span></span><br><span class="line"><span class="undefined">         marker: &#123;</span></span><br><span class="line"><span class="javascript">            symbol: <span class="string">'diamond'</span></span></span><br><span class="line"><span class="undefined">         &#125;,</span></span><br><span class="line"><span class="undefined">         data: [&#123;</span></span><br><span class="line"><span class="undefined">            y: 3.9,</span></span><br><span class="line"><span class="undefined">            marker: &#123;</span></span><br><span class="line"><span class="javascript">               symbol: <span class="string">'url(http://www.highcharts.com/demo/gfx/snow.png)'</span></span></span><br><span class="line"><span class="undefined">            &#125;</span></span><br><span class="line"><span class="undefined">         &#125;, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   ];      </span></span><br><span class="line"><span class="undefined">      </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> json = &#123;&#125;;</span></span><br><span class="line"><span class="undefined">   json.chart = chart;</span></span><br><span class="line"><span class="undefined">   json.title = title;</span></span><br><span class="line"><span class="undefined">   json.subtitle = subtitle;</span></span><br><span class="line"><span class="undefined">   json.tooltip = tooltip;</span></span><br><span class="line"><span class="undefined">   json.xAxis = xAxis;</span></span><br><span class="line"><span class="undefined">   json.yAxis = yAxis;  </span></span><br><span class="line"><span class="undefined">   json.series = series;</span></span><br><span class="line"><span class="undefined">   json.plotOptions = plotOptions;</span></span><br><span class="line"><span class="javascript">   $(<span class="string">'#container'</span>).highcharts(json);</span></span><br><span class="line"><span class="undefined">  </span></span><br><span class="line"><span class="undefined">&#125;);</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>示例六标记区曲线图</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>Highcharts 教程 | 菜鸟教程(runoob.com)<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://code.highcharts.com/highcharts.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"container"</span> <span class="attr">style</span>=<span class="string">"width: 550px; height: 400px; margin: 0 auto"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">language</span>=<span class="string">"JavaScript"</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;  </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> chart = &#123;</span></span><br><span class="line"><span class="javascript">      type: <span class="string">'spline'</span>      </span></span><br><span class="line"><span class="undefined">   &#125;; </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> title = &#123;</span></span><br><span class="line"><span class="javascript">      text: <span class="string">'Wind speed during two days'</span>   </span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> subtitle = &#123;</span></span><br><span class="line"><span class="javascript">      text: <span class="string">'October 6th and 7th 2009 at two locations in Vik i Sogn, Norway'</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> xAxis = &#123;</span></span><br><span class="line"><span class="javascript">      type: <span class="string">'datetime'</span>,</span></span><br><span class="line"><span class="undefined">      labels: &#123;</span></span><br><span class="line"><span class="javascript">         overflow: <span class="string">'justify'</span></span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> yAxis = &#123;</span></span><br><span class="line"><span class="undefined">      title: &#123;</span></span><br><span class="line"><span class="javascript">         text: <span class="string">'Wind speed (m/s)'</span></span></span><br><span class="line"><span class="undefined">      &#125;,</span></span><br><span class="line"><span class="undefined">      min: 0,</span></span><br><span class="line"><span class="undefined">      minorGridLineWidth: 0,</span></span><br><span class="line"><span class="undefined">      gridLineWidth: 0,</span></span><br><span class="line"><span class="javascript">      alternateGridColor: <span class="literal">null</span>,</span></span><br><span class="line"><span class="javascript">      plotBands: [&#123; <span class="comment">// Light air</span></span></span><br><span class="line"><span class="javascript">         <span class="keyword">from</span>: <span class="number">0.3</span>,</span></span><br><span class="line"><span class="undefined">         to: 1.5,</span></span><br><span class="line"><span class="javascript">         color: <span class="string">'rgba(68, 170, 213, 0.1)'</span>,</span></span><br><span class="line"><span class="undefined">         label: &#123;</span></span><br><span class="line"><span class="javascript">            text: <span class="string">'Light air'</span>,</span></span><br><span class="line"><span class="undefined">            style: &#123;</span></span><br><span class="line"><span class="javascript">               color: <span class="string">'#606060'</span></span></span><br><span class="line"><span class="undefined">            &#125;</span></span><br><span class="line"><span class="undefined">         &#125;</span></span><br><span class="line"><span class="javascript">      &#125;, &#123; <span class="comment">// Light breeze</span></span></span><br><span class="line"><span class="javascript">         <span class="keyword">from</span>: <span class="number">1.5</span>,</span></span><br><span class="line"><span class="undefined">         to: 3.3,</span></span><br><span class="line"><span class="javascript">         color: <span class="string">'rgba(0, 0, 0, 0)'</span>,</span></span><br><span class="line"><span class="undefined">         label: &#123;</span></span><br><span class="line"><span class="javascript">            text: <span class="string">'Light breeze'</span>,</span></span><br><span class="line"><span class="undefined">            style: &#123;</span></span><br><span class="line"><span class="javascript">               color: <span class="string">'#606060'</span></span></span><br><span class="line"><span class="undefined">            &#125;</span></span><br><span class="line"><span class="undefined">         &#125;</span></span><br><span class="line"><span class="javascript">      &#125;, &#123; <span class="comment">// Gentle breeze</span></span></span><br><span class="line"><span class="javascript">         <span class="keyword">from</span>: <span class="number">3.3</span>,</span></span><br><span class="line"><span class="undefined">         to: 5.5,</span></span><br><span class="line"><span class="javascript">         color: <span class="string">'rgba(68, 170, 213, 0.1)'</span>,</span></span><br><span class="line"><span class="undefined">         label: &#123;</span></span><br><span class="line"><span class="javascript">            text: <span class="string">'Gentle breeze'</span>,</span></span><br><span class="line"><span class="undefined">            style: &#123;</span></span><br><span class="line"><span class="javascript">               color: <span class="string">'#606060'</span></span></span><br><span class="line"><span class="undefined">            &#125;   </span></span><br><span class="line"><span class="undefined">         &#125;</span></span><br><span class="line"><span class="javascript">      &#125;, &#123; <span class="comment">// Moderate breeze</span></span></span><br><span class="line"><span class="javascript">         <span class="keyword">from</span>: <span class="number">5.5</span>,</span></span><br><span class="line"><span class="undefined">         to: 8,</span></span><br><span class="line"><span class="javascript">         color: <span class="string">'rgba(0, 0, 0, 0)'</span>,</span></span><br><span class="line"><span class="undefined">         label: &#123;</span></span><br><span class="line"><span class="javascript">            text: <span class="string">'Moderate breeze'</span>,</span></span><br><span class="line"><span class="undefined">            style: &#123;</span></span><br><span class="line"><span class="javascript">               color: <span class="string">'#606060'</span></span></span><br><span class="line"><span class="undefined">            &#125;</span></span><br><span class="line"><span class="undefined">         &#125;</span></span><br><span class="line"><span class="javascript">      &#125;, &#123; <span class="comment">// Fresh breeze</span></span></span><br><span class="line"><span class="javascript">         <span class="keyword">from</span>: <span class="number">8</span>,</span></span><br><span class="line"><span class="undefined">         to: 11,</span></span><br><span class="line"><span class="javascript">         color: <span class="string">'rgba(68, 170, 213, 0.1)'</span>,</span></span><br><span class="line"><span class="undefined">         label: &#123;</span></span><br><span class="line"><span class="javascript">            text: <span class="string">'Fresh breeze'</span>,</span></span><br><span class="line"><span class="undefined">            style: &#123;</span></span><br><span class="line"><span class="javascript">               color: <span class="string">'#606060'</span></span></span><br><span class="line"><span class="undefined">            &#125;</span></span><br><span class="line"><span class="undefined">         &#125;</span></span><br><span class="line"><span class="javascript">      &#125;, &#123; <span class="comment">// Strong breeze</span></span></span><br><span class="line"><span class="javascript">         <span class="keyword">from</span>: <span class="number">11</span>,</span></span><br><span class="line"><span class="undefined">         to: 14,</span></span><br><span class="line"><span class="javascript">         color: <span class="string">'rgba(0, 0, 0, 0)'</span>,</span></span><br><span class="line"><span class="undefined">         label: &#123;</span></span><br><span class="line"><span class="javascript">            text: <span class="string">'Strong breeze'</span>,</span></span><br><span class="line"><span class="undefined">            style: &#123;</span></span><br><span class="line"><span class="javascript">               color: <span class="string">'#606060'</span></span></span><br><span class="line"><span class="undefined">            &#125;</span></span><br><span class="line"><span class="undefined">         &#125;   </span></span><br><span class="line"><span class="javascript">      &#125;, &#123; <span class="comment">// High wind</span></span></span><br><span class="line"><span class="javascript">         <span class="keyword">from</span>: <span class="number">14</span>,</span></span><br><span class="line"><span class="undefined">         to: 15,</span></span><br><span class="line"><span class="javascript">         color: <span class="string">'rgba(68, 170, 213, 0.1)'</span>,</span></span><br><span class="line"><span class="undefined">         label: &#123;</span></span><br><span class="line"><span class="javascript">            text: <span class="string">'High wind'</span>,</span></span><br><span class="line"><span class="undefined">            style: &#123;</span></span><br><span class="line"><span class="javascript">               color: <span class="string">'#606060'</span></span></span><br><span class="line"><span class="undefined">            &#125;</span></span><br><span class="line"><span class="undefined">         &#125;</span></span><br><span class="line"><span class="undefined">      &#125;]</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> tooltip = &#123;</span></span><br><span class="line"><span class="javascript">      valueSuffix: <span class="string">' m/s'</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> plotOptions = &#123;</span></span><br><span class="line"><span class="undefined">      spline: &#123;</span></span><br><span class="line"><span class="undefined">         lineWidth: 4,</span></span><br><span class="line"><span class="undefined">         states: &#123;</span></span><br><span class="line"><span class="undefined">            hover: &#123;</span></span><br><span class="line"><span class="undefined">               lineWidth: 5</span></span><br><span class="line"><span class="undefined">            &#125;</span></span><br><span class="line"><span class="undefined">         &#125;,</span></span><br><span class="line"><span class="undefined">         marker: &#123;</span></span><br><span class="line"><span class="javascript">            enabled: <span class="literal">false</span></span></span><br><span class="line"><span class="undefined">         &#125;,</span></span><br><span class="line"><span class="javascript">         pointInterval: <span class="number">3600000</span>, <span class="comment">// one hour</span></span></span><br><span class="line"><span class="javascript">         pointStart: <span class="built_in">Date</span>.UTC(<span class="number">2009</span>, <span class="number">9</span>, <span class="number">6</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>)</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> series= [&#123;</span></span><br><span class="line"><span class="javascript">         name: <span class="string">'Vik i Sogn'</span>,      </span></span><br><span class="line"><span class="undefined">         data: [4.3, 5.1, 4.3, 5.2, 5.4, 4.7, 3.5, 4.1, 5.6, 7.4, 6.9, 7.1,</span></span><br><span class="line"><span class="undefined">         7.9, 7.9, 7.5, 6.7, 7.7, 7.7, 7.4, 7.0, 7.1, 5.8, 5.9, 7.4,</span></span><br><span class="line"><span class="undefined">         8.2, 8.5, 9.4, 8.1, 10.9, 10.4, 10.9, 12.4, 12.1, 9.5, 7.5,</span></span><br><span class="line"><span class="undefined">         7.1, 7.5, 8.1, 6.8, 3.4, 2.1, 1.9, 2.8, 2.9, 1.3, 4.4, 4.2,</span></span><br><span class="line"><span class="undefined">         3.0, 3.0]</span></span><br><span class="line"><span class="undefined">      &#125;, &#123;</span></span><br><span class="line"><span class="javascript">         name: <span class="string">'Norway'</span>,</span></span><br><span class="line"><span class="undefined">         data: [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.1, 0.0, 0.3, 0.0,</span></span><br><span class="line"><span class="undefined">         0.0, 0.4, 0.0, 0.1, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,</span></span><br><span class="line"><span class="undefined">         0.0, 0.6, 1.2, 1.7, 0.7, 2.9, 4.1, 2.6, 3.7, 3.9, 1.7, 2.3,</span></span><br><span class="line"><span class="undefined">         3.0, 3.3, 4.8, 5.0, 4.8, 5.0, 3.2, 2.0, 0.9, 0.4, 0.3, 0.5, 0.4]</span></span><br><span class="line"><span class="undefined">   &#125;];     </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> navigation = &#123;</span></span><br><span class="line"><span class="undefined">      menuItemStyle: &#123;</span></span><br><span class="line"><span class="javascript">         fontSize: <span class="string">'10px'</span></span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   &#125;   </span></span><br><span class="line"><span class="undefined">      </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> json = &#123;&#125;;</span></span><br><span class="line"><span class="undefined">   json.chart = chart;</span></span><br><span class="line"><span class="undefined">   json.title = title;</span></span><br><span class="line"><span class="undefined">   json.subtitle = subtitle;</span></span><br><span class="line"><span class="undefined">   json.tooltip = tooltip;</span></span><br><span class="line"><span class="undefined">   json.xAxis = xAxis;</span></span><br><span class="line"><span class="undefined">   json.yAxis = yAxis;  </span></span><br><span class="line"><span class="undefined">   json.series = series;</span></span><br><span class="line"><span class="undefined">   json.plotOptions = plotOptions;</span></span><br><span class="line"><span class="undefined">   json.navigation = navigation;</span></span><br><span class="line"><span class="javascript">   $(<span class="string">'#container'</span>).highcharts(json);</span></span><br><span class="line"><span class="undefined">  </span></span><br><span class="line"><span class="undefined">&#125;);</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="区域图示例"><a href="#区域图示例" class="headerlink" title="区域图示例"></a>区域图示例</h3><p>示例1基本区域图:</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>Highcharts 教程 | 菜鸟教程(runoob.com)<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://code.highcharts.com/highcharts.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"container"</span> <span class="attr">style</span>=<span class="string">"width: 550px; height: 400px; margin: 0 auto"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">language</span>=<span class="string">"JavaScript"</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;  </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> chart = &#123;</span></span><br><span class="line"><span class="javascript">      type: <span class="string">'area'</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> title = &#123;</span></span><br><span class="line"><span class="javascript">      text: <span class="string">'US and USSR nuclear stockpiles'</span>   </span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> subtitle = &#123;</span></span><br><span class="line"><span class="xml">      text: 'Source: <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf"</span>&gt;</span>' +</span></span><br><span class="line"><span class="javascript">         <span class="string">'thebulletin.metapress.com&lt;/a&gt;'</span>  </span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> xAxis = &#123;</span></span><br><span class="line"><span class="javascript">      allowDecimals: <span class="literal">false</span>,</span></span><br><span class="line"><span class="undefined">      labels: &#123;</span></span><br><span class="line"><span class="javascript">         formatter: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">            <span class="keyword">return</span> <span class="keyword">this</span>.value; <span class="comment">// clean, unformatted number for year</span></span></span><br><span class="line"><span class="undefined">         &#125;</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> yAxis = &#123;</span></span><br><span class="line"><span class="undefined">      title: &#123;</span></span><br><span class="line"><span class="javascript">         text: <span class="string">'Nuclear weapon states'</span></span></span><br><span class="line"><span class="undefined">      &#125;,</span></span><br><span class="line"><span class="undefined">      labels: &#123;</span></span><br><span class="line"><span class="javascript">         formatter: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">            <span class="keyword">return</span> <span class="keyword">this</span>.value / <span class="number">1000</span> + <span class="string">'k'</span>;</span></span><br><span class="line"><span class="undefined">         &#125;</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> tooltip = &#123;</span></span><br><span class="line"><span class="xml">      pointFormat: '&#123;series.name&#125; produced <span class="tag">&lt;<span class="name">b</span>&gt;</span>&#123;point.y:,.0f&#125;<span class="tag">&lt;/<span class="name">b</span>&gt;</span><span class="tag">&lt;<span class="name">br</span>/&gt;</span>warheads in &#123;point.x&#125;'</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> plotOptions = &#123;</span></span><br><span class="line"><span class="undefined">      area: &#123;</span></span><br><span class="line"><span class="undefined">         pointStart: 1940,</span></span><br><span class="line"><span class="undefined">         marker: &#123;</span></span><br><span class="line"><span class="javascript">            enabled: <span class="literal">false</span>,</span></span><br><span class="line"><span class="javascript">            symbol: <span class="string">'circle'</span>,</span></span><br><span class="line"><span class="undefined">            radius: 2,</span></span><br><span class="line"><span class="undefined">            states: &#123;</span></span><br><span class="line"><span class="undefined">               hover: &#123;</span></span><br><span class="line"><span class="javascript">                 enabled: <span class="literal">true</span></span></span><br><span class="line"><span class="undefined">               &#125;</span></span><br><span class="line"><span class="undefined">            &#125;</span></span><br><span class="line"><span class="undefined">         &#125;</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> series= [&#123;</span></span><br><span class="line"><span class="javascript">         name: <span class="string">'USA'</span>,</span></span><br><span class="line"><span class="javascript">            data: [<span class="literal">null</span>, <span class="literal">null</span>, <span class="literal">null</span>, <span class="literal">null</span>, <span class="literal">null</span>, <span class="number">6</span>, <span class="number">11</span>, <span class="number">32</span>, <span class="number">110</span>, <span class="number">235</span>, <span class="number">369</span>, <span class="number">640</span>,</span></span><br><span class="line"><span class="undefined">                1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,</span></span><br><span class="line"><span class="undefined">                27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,</span></span><br><span class="line"><span class="undefined">                26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,</span></span><br><span class="line"><span class="undefined">                24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,</span></span><br><span class="line"><span class="undefined">                22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,</span></span><br><span class="line"><span class="undefined">                10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104]</span></span><br><span class="line"><span class="undefined">        &#125;, &#123;</span></span><br><span class="line"><span class="javascript">            name: <span class="string">'USSR/Russia'</span>,</span></span><br><span class="line"><span class="javascript">            data: [<span class="literal">null</span>, <span class="literal">null</span>, <span class="literal">null</span>, <span class="literal">null</span>, <span class="literal">null</span>, <span class="literal">null</span>, <span class="literal">null</span>, <span class="literal">null</span>, <span class="literal">null</span>, <span class="literal">null</span>,</span></span><br><span class="line"><span class="undefined">                5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,</span></span><br><span class="line"><span class="undefined">                4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,</span></span><br><span class="line"><span class="undefined">                15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,</span></span><br><span class="line"><span class="undefined">                33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,</span></span><br><span class="line"><span class="undefined">                35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,</span></span><br><span class="line"><span class="undefined">                21000, 20000, 19000, 18000, 18000, 17000, 16000]</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   ];     </span></span><br><span class="line"><span class="undefined">      </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> json = &#123;&#125;;   </span></span><br><span class="line"><span class="undefined">   json.chart = chart; </span></span><br><span class="line"><span class="undefined">   json.title = title;   </span></span><br><span class="line"><span class="undefined">   json.subtitle = subtitle; </span></span><br><span class="line"><span class="undefined">   json.tooltip = tooltip;</span></span><br><span class="line"><span class="undefined">   json.xAxis = xAxis;</span></span><br><span class="line"><span class="undefined">   json.yAxis = yAxis;  </span></span><br><span class="line"><span class="undefined">   json.series = series;</span></span><br><span class="line"><span class="undefined">   json.plotOptions = plotOptions;</span></span><br><span class="line"><span class="javascript">   $(<span class="string">'#container'</span>).highcharts(json);</span></span><br><span class="line"><span class="undefined">  </span></span><br><span class="line"><span class="undefined">&#125;);</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>示例2负数区域图</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>Highcharts 教程 | 菜鸟教程(runoob.com)<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://code.highcharts.com/highcharts.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"container"</span> <span class="attr">style</span>=<span class="string">"width: 550px; height: 400px; margin: 0 auto"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">language</span>=<span class="string">"JavaScript"</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;  </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> chart = &#123;</span></span><br><span class="line"><span class="javascript">      type: <span class="string">'area'</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> title = &#123;</span></span><br><span class="line"><span class="javascript">      text: <span class="string">'Area chart with negative values'</span>   </span></span><br><span class="line"><span class="undefined">   &#125;;   </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> xAxis = &#123;</span></span><br><span class="line"><span class="javascript">      categories: [<span class="string">'Apples'</span>, <span class="string">'Oranges'</span>, <span class="string">'Pears'</span>, <span class="string">'Grapes'</span>, <span class="string">'Bananas'</span>]</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> credits = &#123;</span></span><br><span class="line"><span class="javascript">      enabled: <span class="literal">false</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> series= [&#123;</span></span><br><span class="line"><span class="javascript">      name: <span class="string">'John'</span>,</span></span><br><span class="line"><span class="undefined">            data: [5, 3, 4, 7, 2]</span></span><br><span class="line"><span class="undefined">        &#125;, &#123;</span></span><br><span class="line"><span class="javascript">            name: <span class="string">'Jane'</span>,</span></span><br><span class="line"><span class="undefined">            data: [2, -2, -3, 2, 1]</span></span><br><span class="line"><span class="undefined">        &#125;, &#123;</span></span><br><span class="line"><span class="javascript">            name: <span class="string">'Joe'</span>,</span></span><br><span class="line"><span class="undefined">            data: [3, 4, 4, -2, 5]</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   ];     </span></span><br><span class="line"><span class="undefined">      </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> json = &#123;&#125;;   </span></span><br><span class="line"><span class="undefined">   json.chart = chart; </span></span><br><span class="line"><span class="undefined">   json.title = title; </span></span><br><span class="line"><span class="undefined">   json.xAxis = xAxis;</span></span><br><span class="line"><span class="undefined">   json.credits = credits;</span></span><br><span class="line"><span class="undefined">   json.series = series;</span></span><br><span class="line"><span class="javascript">   $(<span class="string">'#container'</span>).highcharts(json);</span></span><br><span class="line"><span class="undefined">  </span></span><br><span class="line"><span class="undefined">&#125;);</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>示例3堆叠区域图</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>Highcharts 教程 | 菜鸟教程(runoob.com)<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://code.highcharts.com/highcharts.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"container"</span> <span class="attr">style</span>=<span class="string">"width: 550px; height: 400px; margin: 0 auto"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">language</span>=<span class="string">"JavaScript"</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;  </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> chart = &#123;</span></span><br><span class="line"><span class="javascript">      type: <span class="string">'area'</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> title = &#123;</span></span><br><span class="line"><span class="javascript">      text: <span class="string">'Historic and Estimated Worldwide Population Growth by Region'</span>   </span></span><br><span class="line"><span class="undefined">   &#125;; </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> subtitle = &#123;</span></span><br><span class="line"><span class="javascript">      text: <span class="string">'Source: Wikipedia.org'</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> xAxis = &#123;</span></span><br><span class="line"><span class="javascript">      categories: [<span class="string">'1750'</span>, <span class="string">'1800'</span>, <span class="string">'1850'</span>, <span class="string">'1900'</span>, <span class="string">'1950'</span>, <span class="string">'1999'</span>, <span class="string">'2050'</span>],</span></span><br><span class="line"><span class="javascript">      tickmarkPlacement: <span class="string">'on'</span>,</span></span><br><span class="line"><span class="undefined">      title: &#123;</span></span><br><span class="line"><span class="javascript">         enabled: <span class="literal">false</span></span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> yAxis = &#123;</span></span><br><span class="line"><span class="undefined">      title: &#123;</span></span><br><span class="line"><span class="javascript">         text: <span class="string">'Billions'</span></span></span><br><span class="line"><span class="undefined">      &#125;,</span></span><br><span class="line"><span class="undefined">      labels: &#123;</span></span><br><span class="line"><span class="javascript">         formatter: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">            <span class="keyword">return</span> <span class="keyword">this</span>.value / <span class="number">1000</span>;</span></span><br><span class="line"><span class="undefined">         &#125;</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> tooltip = &#123;</span></span><br><span class="line"><span class="javascript">      shared: <span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript">      valueSuffix: <span class="string">' millions'</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> plotOptions = &#123;</span></span><br><span class="line"><span class="undefined">      area: &#123;</span></span><br><span class="line"><span class="javascript">         stacking: <span class="string">'normal'</span>,</span></span><br><span class="line"><span class="javascript">         lineColor: <span class="string">'#666666'</span>,</span></span><br><span class="line"><span class="undefined">         lineWidth: 1,</span></span><br><span class="line"><span class="undefined">         marker: &#123;</span></span><br><span class="line"><span class="undefined">            lineWidth: 1,</span></span><br><span class="line"><span class="javascript">            lineColor: <span class="string">'#666666'</span></span></span><br><span class="line"><span class="undefined">         &#125;</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> credits = &#123;</span></span><br><span class="line"><span class="javascript">      enabled: <span class="literal">false</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> series= [&#123;</span></span><br><span class="line"><span class="javascript">       name: <span class="string">'Asia'</span>,</span></span><br><span class="line"><span class="undefined">            data: [502, 635, 809, 947, 1402, 3634, 5268]</span></span><br><span class="line"><span class="undefined">        &#125;, &#123;</span></span><br><span class="line"><span class="javascript">            name: <span class="string">'Africa'</span>,</span></span><br><span class="line"><span class="undefined">            data: [106, 107, 111, 133, 221, 767, 1766]</span></span><br><span class="line"><span class="undefined">        &#125;, &#123;</span></span><br><span class="line"><span class="javascript">            name: <span class="string">'Europe'</span>,</span></span><br><span class="line"><span class="undefined">            data: [163, 203, 276, 408, 547, 729, 628]</span></span><br><span class="line"><span class="undefined">        &#125;, &#123;</span></span><br><span class="line"><span class="javascript">            name: <span class="string">'America'</span>,</span></span><br><span class="line"><span class="undefined">            data: [18, 31, 54, 156, 339, 818, 1201]</span></span><br><span class="line"><span class="undefined">        &#125;, &#123;</span></span><br><span class="line"><span class="javascript">            name: <span class="string">'Oceania'</span>,</span></span><br><span class="line"><span class="undefined">            data: [2, 2, 2, 6, 13, 30, 46]</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   ];     </span></span><br><span class="line"><span class="undefined">      </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> json = &#123;&#125;;   </span></span><br><span class="line"><span class="undefined">   json.chart = chart; </span></span><br><span class="line"><span class="undefined">   json.title = title; </span></span><br><span class="line"><span class="undefined">   json.subtitle = subtitle; </span></span><br><span class="line"><span class="undefined">   json.xAxis = xAxis;</span></span><br><span class="line"><span class="undefined">   json.yAxis = yAxis;</span></span><br><span class="line"><span class="undefined">   json.tooltip = tooltip;</span></span><br><span class="line"><span class="undefined">   json.plotOptions = plotOptions;</span></span><br><span class="line"><span class="undefined">   json.credits = credits;</span></span><br><span class="line"><span class="undefined">   json.series = series;</span></span><br><span class="line"><span class="javascript">   $(<span class="string">'#container'</span>).highcharts(json);</span></span><br><span class="line"><span class="undefined">  </span></span><br><span class="line"><span class="undefined">&#125;);</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>示例4使用百分比堆叠区域图</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>Highcharts 教程 | 菜鸟教程(runoob.com)<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://code.highcharts.com/highcharts.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"container"</span> <span class="attr">style</span>=<span class="string">"width: 550px; height: 400px; margin: 0 auto"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">language</span>=<span class="string">"JavaScript"</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;  </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> chart = &#123;</span></span><br><span class="line"><span class="javascript">      type: <span class="string">'area'</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> title = &#123;</span></span><br><span class="line"><span class="javascript">      text: <span class="string">'Historic and Estimated Worldwide Population Growth by Region'</span>   </span></span><br><span class="line"><span class="undefined">   &#125;; </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> subtitle = &#123;</span></span><br><span class="line"><span class="javascript">      text: <span class="string">'Source: Wikipedia.org'</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> xAxis = &#123;</span></span><br><span class="line"><span class="javascript">      categories: [<span class="string">'1750'</span>, <span class="string">'1800'</span>, <span class="string">'1850'</span>, <span class="string">'1900'</span>, <span class="string">'1950'</span>, <span class="string">'1999'</span>, <span class="string">'2050'</span>],</span></span><br><span class="line"><span class="javascript">      tickmarkPlacement: <span class="string">'on'</span>,</span></span><br><span class="line"><span class="undefined">      title: &#123;</span></span><br><span class="line"><span class="javascript">         enabled: <span class="literal">false</span></span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> yAxis = &#123;</span></span><br><span class="line"><span class="undefined">      title: &#123;</span></span><br><span class="line"><span class="javascript">         text: <span class="string">'Billions'</span></span></span><br><span class="line"><span class="undefined">      &#125;,</span></span><br><span class="line"><span class="undefined">      labels: &#123;</span></span><br><span class="line"><span class="javascript">         formatter: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">            <span class="keyword">return</span> <span class="keyword">this</span>.value / <span class="number">1000</span>;</span></span><br><span class="line"><span class="undefined">         &#125;</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> tooltip = &#123;</span></span><br><span class="line"><span class="javascript">      shared: <span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript">      valueSuffix: <span class="string">' millions'</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> plotOptions = &#123;</span></span><br><span class="line"><span class="undefined">      area: &#123;</span></span><br><span class="line"><span class="javascript">         stacking: <span class="string">'percent'</span>,</span></span><br><span class="line"><span class="javascript">         lineColor: <span class="string">'#666666'</span>,</span></span><br><span class="line"><span class="undefined">         lineWidth: 1,</span></span><br><span class="line"><span class="undefined">         marker: &#123;</span></span><br><span class="line"><span class="undefined">            lineWidth: 1,</span></span><br><span class="line"><span class="javascript">            lineColor: <span class="string">'#666666'</span></span></span><br><span class="line"><span class="undefined">         &#125;</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> credits = &#123;</span></span><br><span class="line"><span class="javascript">      enabled: <span class="literal">false</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> series= [&#123;</span></span><br><span class="line"><span class="javascript">       name: <span class="string">'Asia'</span>,</span></span><br><span class="line"><span class="undefined">            data: [502, 635, 809, 947, 1402, 3634, 5268]</span></span><br><span class="line"><span class="undefined">        &#125;, &#123;</span></span><br><span class="line"><span class="javascript">            name: <span class="string">'Africa'</span>,</span></span><br><span class="line"><span class="undefined">            data: [106, 107, 111, 133, 221, 767, 1766]</span></span><br><span class="line"><span class="undefined">        &#125;, &#123;</span></span><br><span class="line"><span class="javascript">            name: <span class="string">'Europe'</span>,</span></span><br><span class="line"><span class="undefined">            data: [163, 203, 276, 408, 547, 729, 628]</span></span><br><span class="line"><span class="undefined">        &#125;, &#123;</span></span><br><span class="line"><span class="javascript">            name: <span class="string">'America'</span>,</span></span><br><span class="line"><span class="undefined">            data: [18, 31, 54, 156, 339, 818, 1201]</span></span><br><span class="line"><span class="undefined">        &#125;, &#123;</span></span><br><span class="line"><span class="javascript">            name: <span class="string">'Oceania'</span>,</span></span><br><span class="line"><span class="undefined">            data: [2, 2, 2, 6, 13, 30, 46]</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   ];     </span></span><br><span class="line"><span class="undefined">      </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> json = &#123;&#125;;   </span></span><br><span class="line"><span class="undefined">   json.chart = chart; </span></span><br><span class="line"><span class="undefined">   json.title = title; </span></span><br><span class="line"><span class="undefined">   json.subtitle = subtitle; </span></span><br><span class="line"><span class="undefined">   json.xAxis = xAxis;</span></span><br><span class="line"><span class="undefined">   json.yAxis = yAxis;</span></span><br><span class="line"><span class="undefined">   json.tooltip = tooltip;</span></span><br><span class="line"><span class="undefined">   json.plotOptions = plotOptions;</span></span><br><span class="line"><span class="undefined">   json.credits = credits;</span></span><br><span class="line"><span class="undefined">   json.series = series;</span></span><br><span class="line"><span class="javascript">   $(<span class="string">'#container'</span>).highcharts(json);</span></span><br><span class="line"><span class="undefined">  </span></span><br><span class="line"><span class="undefined">&#125;);</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>示例5丢失数据的区域图</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>Highcharts 教程 | 菜鸟教程(runoob.com)<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://code.highcharts.com/highcharts.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"container"</span> <span class="attr">style</span>=<span class="string">"width: 550px; height: 400px; margin: 0 auto"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">language</span>=<span class="string">"JavaScript"</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;  </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> chart = &#123;</span></span><br><span class="line"><span class="javascript">      type: <span class="string">'area'</span>,</span></span><br><span class="line"><span class="undefined">	  spacingBottom: 30</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> title = &#123;</span></span><br><span class="line"><span class="javascript">      text: <span class="string">'Fruit consumption *'</span>   </span></span><br><span class="line"><span class="undefined">   &#125;; </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> subtitle = &#123;</span></span><br><span class="line"><span class="javascript">      text: <span class="string">'* Jane\'s banana consumption is unknown'</span>,</span></span><br><span class="line"><span class="javascript">      floating: <span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript">      align: <span class="string">'right'</span>,</span></span><br><span class="line"><span class="javascript">      verticalAlign: <span class="string">'bottom'</span>,</span></span><br><span class="line"><span class="undefined">      y: 15</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> legend = &#123;</span></span><br><span class="line"><span class="javascript">      layout: <span class="string">'vertical'</span>,</span></span><br><span class="line"><span class="javascript">      align: <span class="string">'left'</span>,</span></span><br><span class="line"><span class="javascript">      verticalAlign: <span class="string">'top'</span>,</span></span><br><span class="line"><span class="undefined">      x: 150,</span></span><br><span class="line"><span class="undefined">      y: 100,</span></span><br><span class="line"><span class="javascript">      floating: <span class="literal">true</span>,</span></span><br><span class="line"><span class="undefined">      borderWidth: 1,</span></span><br><span class="line"><span class="javascript">      backgroundColor: (Highcharts.theme &amp;&amp; Highcharts.theme.legendBackgroundColor) || <span class="string">'#FFFFFF'</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> xAxis = &#123;</span></span><br><span class="line"><span class="javascript">      categories: [<span class="string">'Apples'</span>, <span class="string">'Pears'</span>, <span class="string">'Oranges'</span>, <span class="string">'Bananas'</span>, <span class="string">'Grapes'</span>, <span class="string">'Plums'</span>, <span class="string">'Strawberries'</span>, <span class="string">'Raspberries'</span>]      </span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> yAxis = &#123;</span></span><br><span class="line"><span class="undefined">      title: &#123;</span></span><br><span class="line"><span class="javascript">         text: <span class="string">'Y-Axis'</span></span></span><br><span class="line"><span class="undefined">      &#125;,</span></span><br><span class="line"><span class="undefined">      labels: &#123;</span></span><br><span class="line"><span class="javascript">         formatter: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">            <span class="keyword">return</span> <span class="keyword">this</span>.value;</span></span><br><span class="line"><span class="undefined">         &#125;</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> tooltip = &#123;</span></span><br><span class="line"><span class="javascript">      formatter: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">         <span class="keyword">return</span> <span class="string">'&lt;b&gt;'</span> + <span class="keyword">this</span>.series.name + <span class="string">'&lt;/b&gt;&lt;br/&gt;'</span> +</span></span><br><span class="line"><span class="javascript">            <span class="keyword">this</span>.x + <span class="string">': '</span> + <span class="keyword">this</span>.y;</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> plotOptions = &#123;</span></span><br><span class="line"><span class="undefined">      area: &#123;</span></span><br><span class="line"><span class="undefined">         fillOpacity: 0.5</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> credits = &#123;</span></span><br><span class="line"><span class="javascript">      enabled: <span class="literal">false</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> series= [&#123;</span></span><br><span class="line"><span class="javascript">        name: <span class="string">'John'</span>,</span></span><br><span class="line"><span class="undefined">            data: [0, 1, 4, 4, 5, 2, 3, 7]</span></span><br><span class="line"><span class="undefined">        &#125;, &#123;</span></span><br><span class="line"><span class="javascript">            name: <span class="string">'Jane'</span>,</span></span><br><span class="line"><span class="javascript">            data: [<span class="number">1</span>, <span class="number">0</span>, <span class="number">3</span>, <span class="literal">null</span>, <span class="number">3</span>, <span class="number">1</span>, <span class="number">2</span>, <span class="number">1</span>]</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   ];     </span></span><br><span class="line"><span class="undefined">      </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> json = &#123;&#125;;   </span></span><br><span class="line"><span class="undefined">   json.chart = chart; </span></span><br><span class="line"><span class="undefined">   json.title = title; </span></span><br><span class="line"><span class="undefined">   json.subtitle = subtitle; </span></span><br><span class="line"><span class="undefined">   json.xAxis = xAxis;</span></span><br><span class="line"><span class="undefined">   json.yAxis = yAxis;</span></span><br><span class="line"><span class="undefined">   json.legend = legend;</span></span><br><span class="line"><span class="undefined">   json.tooltip = tooltip;</span></span><br><span class="line"><span class="undefined">   json.plotOptions = plotOptions;</span></span><br><span class="line"><span class="undefined">   json.credits = credits;</span></span><br><span class="line"><span class="undefined">   json.series = series;</span></span><br><span class="line"><span class="javascript">   $(<span class="string">'#container'</span>).highcharts(json);</span></span><br><span class="line"><span class="undefined">  </span></span><br><span class="line"><span class="undefined">&#125;);</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>示例6曲线区域图</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>Highcharts 教程 | 菜鸟教程(runoob.com)<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://code.highcharts.com/highcharts.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"container"</span> <span class="attr">style</span>=<span class="string">"width: 550px; height: 400px; margin: 0 auto"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">language</span>=<span class="string">"JavaScript"</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;  </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> chart = &#123;</span></span><br><span class="line"><span class="javascript">      type: <span class="string">'areaspline'</span>     </span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> title = &#123;</span></span><br><span class="line"><span class="javascript">      text: <span class="string">'Average fruit consumption during one week'</span>   </span></span><br><span class="line"><span class="undefined">   &#125;; </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> subtitle = &#123;</span></span><br><span class="line"><span class="undefined">      style: &#123;</span></span><br><span class="line"><span class="javascript">         position: <span class="string">'absolute'</span>,</span></span><br><span class="line"><span class="javascript">         right: <span class="string">'0px'</span>,</span></span><br><span class="line"><span class="javascript">         bottom: <span class="string">'10px'</span></span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> legend = &#123;</span></span><br><span class="line"><span class="javascript">      layout: <span class="string">'vertical'</span>,</span></span><br><span class="line"><span class="javascript">      align: <span class="string">'left'</span>,</span></span><br><span class="line"><span class="javascript">      verticalAlign: <span class="string">'top'</span>,</span></span><br><span class="line"><span class="undefined">      x: 150,</span></span><br><span class="line"><span class="undefined">      y: 100,</span></span><br><span class="line"><span class="javascript">      floating: <span class="literal">true</span>,</span></span><br><span class="line"><span class="undefined">      borderWidth: 1,</span></span><br><span class="line"><span class="javascript">      backgroundColor: (Highcharts.theme &amp;&amp; Highcharts.theme.legendBackgroundColor) || <span class="string">'#FFFFFF'</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> xAxis = &#123;</span></span><br><span class="line"><span class="javascript">      categories: [<span class="string">'Monday'</span>,<span class="string">'Tuesday'</span>,<span class="string">'Wednesday'</span>,<span class="string">'Thursday'</span>,<span class="string">'Friday'</span>,<span class="string">'Saturday'</span>,<span class="string">'Sunday'</span>]      </span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> yAxis = &#123;</span></span><br><span class="line"><span class="undefined">      title: &#123;</span></span><br><span class="line"><span class="javascript">         text: <span class="string">'Fruit units'</span></span></span><br><span class="line"><span class="undefined">      &#125;      </span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> tooltip = &#123;</span></span><br><span class="line"><span class="javascript">       shared: <span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript">       valueSuffix: <span class="string">' units'</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> credits = &#123;</span></span><br><span class="line"><span class="javascript">       enabled: <span class="literal">false</span></span></span><br><span class="line"><span class="undefined">   &#125;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> plotOptions = &#123;</span></span><br><span class="line"><span class="undefined">      areaspline: &#123;</span></span><br><span class="line"><span class="undefined">         fillOpacity: 0.5</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   &#125;;   </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> series= [&#123;</span></span><br><span class="line"><span class="javascript">        name: <span class="string">'John'</span>,</span></span><br><span class="line"><span class="undefined">            data: [3, 4, 3, 5, 4, 10, 12]</span></span><br><span class="line"><span class="undefined">        &#125;, &#123;</span></span><br><span class="line"><span class="javascript">            name: <span class="string">'Jane'</span>,</span></span><br><span class="line"><span class="undefined">            data: [1, 3, 4, 3, 3, 5, 4]</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   ];     </span></span><br><span class="line"><span class="undefined">      </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> json = &#123;&#125;;   </span></span><br><span class="line"><span class="undefined">   json.chart = chart; </span></span><br><span class="line"><span class="undefined">   json.title = title; </span></span><br><span class="line"><span class="undefined">   json.subtitle = subtitle; </span></span><br><span class="line"><span class="undefined">   json.xAxis = xAxis;</span></span><br><span class="line"><span class="undefined">   json.yAxis = yAxis;</span></span><br><span class="line"><span class="undefined">   json.legend = legend;   </span></span><br><span class="line"><span class="undefined">   json.plotOptions = plotOptions;</span></span><br><span class="line"><span class="undefined">   json.credits = credits;</span></span><br><span class="line"><span class="undefined">   json.series = series;</span></span><br><span class="line"><span class="javascript">   $(<span class="string">'#container'</span>).highcharts(json);</span></span><br><span class="line"><span class="undefined">  </span></span><br><span class="line"><span class="undefined">&#125;);</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>示例7区间区域图</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">   <span class="tag">&lt;<span class="name">title</span>&gt;</span>Highcharts 教程 | 菜鸟教程(runoob.com)<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">   <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">   <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://code.highcharts.com/highcharts.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span>  </span><br><span class="line">   <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://code.highcharts.com/highcharts-more.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span>   </span><br><span class="line">   <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://code.highcharts.com/modules/data.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"container"</span> <span class="attr">style</span>=<span class="string">"width: 550px; height: 400px; margin: 0 auto"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">language</span>=<span class="string">"JavaScript"</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;  </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> chart = &#123;</span></span><br><span class="line"><span class="javascript">      type: <span class="string">'arearange'</span>,</span></span><br><span class="line"><span class="javascript">      zoomType: <span class="string">'x'</span>   </span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> title = &#123;</span></span><br><span class="line"><span class="javascript">      text: <span class="string">'Temperature variation by day'</span>   </span></span><br><span class="line"><span class="undefined">   &#125;;    </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> xAxis = &#123;</span></span><br><span class="line"><span class="javascript">      type: <span class="string">'datetime'</span>     </span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> yAxis = &#123;</span></span><br><span class="line"><span class="undefined">      title: &#123;</span></span><br><span class="line"><span class="javascript">         text: <span class="literal">null</span></span></span><br><span class="line"><span class="undefined">      &#125;      </span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> tooltip = &#123;</span></span><br><span class="line"><span class="javascript">       shared: <span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript">     crosshairs: <span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript">       valueSuffix: <span class="string">'\xB0C'</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> legend = &#123;</span></span><br><span class="line"><span class="javascript">       enabled: <span class="literal">false</span></span></span><br><span class="line"><span class="undefined">   &#125;    </span></span><br><span class="line"><span class="undefined">      </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> json = &#123;&#125;;   </span></span><br><span class="line"><span class="undefined">   json.chart = chart; </span></span><br><span class="line"><span class="undefined">   json.title = title;    </span></span><br><span class="line"><span class="undefined">   json.xAxis = xAxis;</span></span><br><span class="line"><span class="undefined">   json.yAxis = yAxis;</span></span><br><span class="line"><span class="undefined">   json.legend = legend;     </span></span><br><span class="line"><span class="undefined">   </span></span><br><span class="line"><span class="javascript">   $.getJSON(<span class="string">'http://www.highcharts.com/samples/data/jsonp.php?filename=range.json&amp;callback=?'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">data</span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">      <span class="keyword">var</span> series= [&#123;</span></span><br><span class="line"><span class="javascript">         name: <span class="string">'Temperatures'</span>,</span></span><br><span class="line"><span class="undefined">         data: data</span></span><br><span class="line"><span class="undefined">         &#125;</span></span><br><span class="line"><span class="undefined">      ];     </span></span><br><span class="line"><span class="undefined">    json.series = series;</span></span><br><span class="line"><span class="javascript">    $(<span class="string">'#container'</span>).highcharts(json);</span></span><br><span class="line"><span class="undefined">   &#125;);    </span></span><br><span class="line"><span class="undefined">&#125;);</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>示例8使用区间和线的区域图</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">   <span class="tag">&lt;<span class="name">title</span>&gt;</span>Highcharts 教程 | 菜鸟教程(runoob.com)<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">   <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">   <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://code.highcharts.com/highcharts.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span>  </span><br><span class="line">   <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://code.highcharts.com/highcharts-more.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span>  </span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"container"</span> <span class="attr">style</span>=<span class="string">"width: 550px; height: 400px; margin: 0 auto"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">language</span>=<span class="string">"JavaScript"</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;  </span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> ranges = [</span></span><br><span class="line"><span class="undefined">      [1246406400000, 14.3, 27.7],</span></span><br><span class="line"><span class="undefined">      [1246492800000, 14.5, 27.8],</span></span><br><span class="line"><span class="undefined">      [1246579200000, 15.5, 29.6],</span></span><br><span class="line"><span class="undefined">      [1246665600000, 16.7, 30.7],</span></span><br><span class="line"><span class="undefined">      [1246752000000, 16.5, 25.0],</span></span><br><span class="line"><span class="undefined">      [1246838400000, 17.8, 25.7],</span></span><br><span class="line"><span class="undefined">      [1246924800000, 13.5, 24.8],</span></span><br><span class="line"><span class="undefined">      [1247011200000, 10.5, 21.4],</span></span><br><span class="line"><span class="undefined">      [1247097600000, 9.2, 23.8],</span></span><br><span class="line"><span class="undefined">      [1247184000000, 11.6, 21.8],</span></span><br><span class="line"><span class="undefined">      [1247270400000, 10.7, 23.7],</span></span><br><span class="line"><span class="undefined">      [1247356800000, 11.0, 23.3],</span></span><br><span class="line"><span class="undefined">      [1247443200000, 11.6, 23.7],</span></span><br><span class="line"><span class="undefined">      [1247529600000, 11.8, 20.7],</span></span><br><span class="line"><span class="undefined">      [1247616000000, 12.6, 22.4],</span></span><br><span class="line"><span class="undefined">      [1247702400000, 13.6, 19.6],</span></span><br><span class="line"><span class="undefined">      [1247788800000, 11.4, 22.6],</span></span><br><span class="line"><span class="undefined">      [1247875200000, 13.2, 25.0],</span></span><br><span class="line"><span class="undefined">      [1247961600000, 14.2, 21.6],</span></span><br><span class="line"><span class="undefined">      [1248048000000, 13.1, 17.1],</span></span><br><span class="line"><span class="undefined">      [1248134400000, 12.2, 15.5],</span></span><br><span class="line"><span class="undefined">      [1248220800000, 12.0, 20.8],</span></span><br><span class="line"><span class="undefined">      [1248307200000, 12.0, 17.1],</span></span><br><span class="line"><span class="undefined">      [1248393600000, 12.7, 18.3],</span></span><br><span class="line"><span class="undefined">      [1248480000000, 12.4, 19.4],</span></span><br><span class="line"><span class="undefined">      [1248566400000, 12.6, 19.9],</span></span><br><span class="line"><span class="undefined">      [1248652800000, 11.9, 20.2],</span></span><br><span class="line"><span class="undefined">      [1248739200000, 11.0, 19.3],</span></span><br><span class="line"><span class="undefined">      [1248825600000, 10.8, 17.8],</span></span><br><span class="line"><span class="undefined">      [1248912000000, 11.8, 18.5],</span></span><br><span class="line"><span class="undefined">      [1248998400000, 10.8, 16.1]</span></span><br><span class="line"><span class="undefined">   ];</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> averages = [</span></span><br><span class="line"><span class="undefined">      [1246406400000, 21.5],</span></span><br><span class="line"><span class="undefined">      [1246492800000, 22.1],</span></span><br><span class="line"><span class="undefined">      [1246579200000, 23],</span></span><br><span class="line"><span class="undefined">      [1246665600000, 23.8],</span></span><br><span class="line"><span class="undefined">      [1246752000000, 21.4],</span></span><br><span class="line"><span class="undefined">      [1246838400000, 21.3],</span></span><br><span class="line"><span class="undefined">      [1246924800000, 18.3],</span></span><br><span class="line"><span class="undefined">      [1247011200000, 15.4],</span></span><br><span class="line"><span class="undefined">      [1247097600000, 16.4],</span></span><br><span class="line"><span class="undefined">      [1247184000000, 17.7],</span></span><br><span class="line"><span class="undefined">      [1247270400000, 17.5],</span></span><br><span class="line"><span class="undefined">      [1247356800000, 17.6],</span></span><br><span class="line"><span class="undefined">      [1247443200000, 17.7],</span></span><br><span class="line"><span class="undefined">      [1247529600000, 16.8],</span></span><br><span class="line"><span class="undefined">      [1247616000000, 17.7],</span></span><br><span class="line"><span class="undefined">      [1247702400000, 16.3],</span></span><br><span class="line"><span class="undefined">      [1247788800000, 17.8],</span></span><br><span class="line"><span class="undefined">      [1247875200000, 18.1],</span></span><br><span class="line"><span class="undefined">      [1247961600000, 17.2],</span></span><br><span class="line"><span class="undefined">      [1248048000000, 14.4],</span></span><br><span class="line"><span class="undefined">      [1248134400000, 13.7],</span></span><br><span class="line"><span class="undefined">      [1248220800000, 15.7],</span></span><br><span class="line"><span class="undefined">      [1248307200000, 14.6],</span></span><br><span class="line"><span class="undefined">      [1248393600000, 15.3],</span></span><br><span class="line"><span class="undefined">      [1248480000000, 15.3],</span></span><br><span class="line"><span class="undefined">      [1248566400000, 15.8],</span></span><br><span class="line"><span class="undefined">      [1248652800000, 15.2],</span></span><br><span class="line"><span class="undefined">      [1248739200000, 14.8],</span></span><br><span class="line"><span class="undefined">      [1248825600000, 14.4],</span></span><br><span class="line"><span class="undefined">      [1248912000000, 15],</span></span><br><span class="line"><span class="undefined">      [1248998400000, 13.6]</span></span><br><span class="line"><span class="undefined">   ];</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> title = &#123;</span></span><br><span class="line"><span class="javascript">      text: <span class="string">'July temperatures'</span>   </span></span><br><span class="line"><span class="undefined">   &#125;;    </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> xAxis = &#123;</span></span><br><span class="line"><span class="javascript">      type: <span class="string">'datetime'</span>     </span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> yAxis = &#123;</span></span><br><span class="line"><span class="undefined">      title: &#123;</span></span><br><span class="line"><span class="javascript">         text: <span class="literal">null</span></span></span><br><span class="line"><span class="undefined">      &#125;      </span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> tooltip = &#123;</span></span><br><span class="line"><span class="javascript">       shared: <span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript">      crosshairs: <span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript">       valueSuffix: <span class="string">'\xB0C'</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> legend = &#123;      </span></span><br><span class="line"><span class="undefined">   &#125;    </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> series= [&#123;</span></span><br><span class="line"><span class="javascript">        name: <span class="string">'Temperature'</span>,</span></span><br><span class="line"><span class="undefined">            data: averages,</span></span><br><span class="line"><span class="undefined">            zIndex: 1,</span></span><br><span class="line"><span class="undefined">            marker: &#123;</span></span><br><span class="line"><span class="javascript">                fillColor: <span class="string">'white'</span>,</span></span><br><span class="line"><span class="undefined">                lineWidth: 2,</span></span><br><span class="line"><span class="undefined">                lineColor: Highcharts.getOptions().colors[0]</span></span><br><span class="line"><span class="undefined">            &#125;</span></span><br><span class="line"><span class="undefined">        &#125;, &#123;</span></span><br><span class="line"><span class="javascript">            name: <span class="string">'Range'</span>,</span></span><br><span class="line"><span class="undefined">            data: ranges,</span></span><br><span class="line"><span class="javascript">            type: <span class="string">'arearange'</span>,</span></span><br><span class="line"><span class="undefined">            lineWidth: 0,</span></span><br><span class="line"><span class="javascript">            linkedTo: <span class="string">':previous'</span>,</span></span><br><span class="line"><span class="undefined">            color: Highcharts.getOptions().colors[0],</span></span><br><span class="line"><span class="undefined">            fillOpacity: 0.3,</span></span><br><span class="line"><span class="undefined">            zIndex: 0</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   ];  </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> json = &#123;&#125;;   </span></span><br><span class="line"><span class="undefined">   json.title = title;    </span></span><br><span class="line"><span class="undefined">   json.xAxis = xAxis;</span></span><br><span class="line"><span class="undefined">   json.yAxis = yAxis;</span></span><br><span class="line"><span class="undefined">   json.tooltip = tooltip;</span></span><br><span class="line"><span class="undefined">   json.legend = legend;     </span></span><br><span class="line"><span class="undefined">   json.series = series;</span></span><br><span class="line"><span class="javascript">   $(<span class="string">'#container'</span>).highcharts(json); </span></span><br><span class="line"><span class="undefined">&#125;);</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="条形图示例"><a href="#条形图示例" class="headerlink" title="条形图示例"></a>条形图示例</h3><p>示例1 基本条形图</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>Highcharts 教程 | 菜鸟教程(runoob.com)<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://code.highcharts.com/highcharts.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"container"</span> <span class="attr">style</span>=<span class="string">"width: 550px; height: 400px; margin: 0 auto"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">language</span>=<span class="string">"JavaScript"</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;  </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> chart = &#123;</span></span><br><span class="line"><span class="javascript">      type: <span class="string">'bar'</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> title = &#123;</span></span><br><span class="line"><span class="javascript">      text: <span class="string">'Historic World Population by Region'</span>   </span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> subtitle = &#123;</span></span><br><span class="line"><span class="javascript">      text: <span class="string">'Source: Wikipedia.org'</span>  </span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> xAxis = &#123;</span></span><br><span class="line"><span class="javascript">      categories: [<span class="string">'Africa'</span>, <span class="string">'America'</span>, <span class="string">'Asia'</span>, <span class="string">'Europe'</span>, <span class="string">'Oceania'</span>],</span></span><br><span class="line"><span class="undefined">      title: &#123;</span></span><br><span class="line"><span class="javascript">         text: <span class="literal">null</span></span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> yAxis = &#123;</span></span><br><span class="line"><span class="undefined">      min: 0,</span></span><br><span class="line"><span class="undefined">      title: &#123;</span></span><br><span class="line"><span class="javascript">         text: <span class="string">'Population (millions)'</span>,</span></span><br><span class="line"><span class="javascript">         align: <span class="string">'high'</span></span></span><br><span class="line"><span class="undefined">      &#125;,</span></span><br><span class="line"><span class="undefined">      labels: &#123;</span></span><br><span class="line"><span class="javascript">         overflow: <span class="string">'justify'</span></span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> tooltip = &#123;</span></span><br><span class="line"><span class="javascript">      valueSuffix: <span class="string">' millions'</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> plotOptions = &#123;</span></span><br><span class="line"><span class="undefined">      bar: &#123;</span></span><br><span class="line"><span class="undefined">         dataLabels: &#123;</span></span><br><span class="line"><span class="javascript">            enabled: <span class="literal">true</span></span></span><br><span class="line"><span class="undefined">         &#125;</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> legend = &#123;</span></span><br><span class="line"><span class="javascript">      layout: <span class="string">'vertical'</span>,</span></span><br><span class="line"><span class="javascript">      align: <span class="string">'right'</span>,</span></span><br><span class="line"><span class="javascript">      verticalAlign: <span class="string">'top'</span>,</span></span><br><span class="line"><span class="undefined">      x: -40,</span></span><br><span class="line"><span class="undefined">      y: 100,</span></span><br><span class="line"><span class="javascript">      floating: <span class="literal">true</span>,</span></span><br><span class="line"><span class="undefined">      borderWidth: 1,</span></span><br><span class="line"><span class="javascript">      backgroundColor: ((Highcharts.theme &amp;&amp; Highcharts.theme.legendBackgroundColor) || <span class="string">'#FFFFFF'</span>),</span></span><br><span class="line"><span class="javascript">      shadow: <span class="literal">true</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> credits = &#123;</span></span><br><span class="line"><span class="javascript">      enabled: <span class="literal">false</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="undefined">   </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> series= [&#123;</span></span><br><span class="line"><span class="javascript">         name: <span class="string">'Year 1800'</span>,</span></span><br><span class="line"><span class="undefined">            data: [107, 31, 635, 203, 2]</span></span><br><span class="line"><span class="undefined">        &#125;, &#123;</span></span><br><span class="line"><span class="javascript">            name: <span class="string">'Year 1900'</span>,</span></span><br><span class="line"><span class="undefined">            data: [133, 156, 947, 408, 6]</span></span><br><span class="line"><span class="undefined">        &#125;, &#123;</span></span><br><span class="line"><span class="javascript">            name: <span class="string">'Year 2008'</span>,</span></span><br><span class="line"><span class="undefined">            data: [973, 914, 4054, 732, 34]      </span></span><br><span class="line"><span class="undefined">	    &#125;</span></span><br><span class="line"><span class="undefined">   ];     </span></span><br><span class="line"><span class="undefined">      </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> json = &#123;&#125;;   </span></span><br><span class="line"><span class="undefined">   json.chart = chart; </span></span><br><span class="line"><span class="undefined">   json.title = title;   </span></span><br><span class="line"><span class="undefined">   json.subtitle = subtitle; </span></span><br><span class="line"><span class="undefined">   json.tooltip = tooltip;</span></span><br><span class="line"><span class="undefined">   json.xAxis = xAxis;</span></span><br><span class="line"><span class="undefined">   json.yAxis = yAxis;  </span></span><br><span class="line"><span class="undefined">   json.series = series;</span></span><br><span class="line"><span class="undefined">   json.plotOptions = plotOptions;</span></span><br><span class="line"><span class="undefined">   json.legend = legend;</span></span><br><span class="line"><span class="undefined">   json.credits = credits;</span></span><br><span class="line"><span class="javascript">   $(<span class="string">'#container'</span>).highcharts(json);</span></span><br><span class="line"><span class="undefined">  </span></span><br><span class="line"><span class="undefined">&#125;);</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>示例2反向堆叠图</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>Highcharts 教程 | 菜鸟教程(runoob.com)<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://code.highcharts.com/highcharts.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"container"</span> <span class="attr">style</span>=<span class="string">"width: 550px; height: 400px; margin: 0 auto"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">language</span>=<span class="string">"JavaScript"</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;  </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> chart = &#123;</span></span><br><span class="line"><span class="javascript">      type: <span class="string">'bar'</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> title = &#123;</span></span><br><span class="line"><span class="javascript">      text: <span class="string">'Bar chart with negative values'</span>   </span></span><br><span class="line"><span class="undefined">   &#125;;   </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> xAxis = &#123;</span></span><br><span class="line"><span class="javascript">      categories: [<span class="string">'Apples'</span>, <span class="string">'Oranges'</span>, <span class="string">'Pears'</span>, <span class="string">'Grapes'</span>, <span class="string">'Bananas'</span>]</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> credits = &#123;</span></span><br><span class="line"><span class="javascript">      enabled: <span class="literal">false</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> series= [&#123;</span></span><br><span class="line"><span class="javascript">      name: <span class="string">'John'</span>,</span></span><br><span class="line"><span class="undefined">            data: [5, 3, 4, 7, 2]</span></span><br><span class="line"><span class="undefined">        &#125;, &#123;</span></span><br><span class="line"><span class="javascript">            name: <span class="string">'Jane'</span>,</span></span><br><span class="line"><span class="undefined">            data: [2, -2, -3, 2, 1]</span></span><br><span class="line"><span class="undefined">        &#125;, &#123;</span></span><br><span class="line"><span class="javascript">            name: <span class="string">'Joe'</span>,</span></span><br><span class="line"><span class="undefined">            data: [3, 4, 4, -2, 5]</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   ];     </span></span><br><span class="line"><span class="undefined">      </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> json = &#123;&#125;;   </span></span><br><span class="line"><span class="undefined">   json.chart = chart; </span></span><br><span class="line"><span class="undefined">   json.title = title; </span></span><br><span class="line"><span class="undefined">   json.xAxis = xAxis;</span></span><br><span class="line"><span class="undefined">   json.credits = credits;</span></span><br><span class="line"><span class="undefined">   json.series = series;</span></span><br><span class="line"><span class="javascript">   $(<span class="string">'#container'</span>).highcharts(json);</span></span><br><span class="line"><span class="undefined">  </span></span><br><span class="line"><span class="undefined">&#125;);</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="柱形图示例"><a href="#柱形图示例" class="headerlink" title="柱形图示例"></a>柱形图示例</h3><p>示例1基本柱形图</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>Highcharts 教程 | 菜鸟教程(runoob.com)<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://code.highcharts.com/highcharts.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"container"</span> <span class="attr">style</span>=<span class="string">"width: 550px; height: 400px; margin: 0 auto"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">language</span>=<span class="string">"JavaScript"</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;  </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> chart = &#123;</span></span><br><span class="line"><span class="javascript">      type: <span class="string">'column'</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> title = &#123;</span></span><br><span class="line"><span class="javascript">      text: <span class="string">'每月平均降雨量'</span>   </span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> subtitle = &#123;</span></span><br><span class="line"><span class="javascript">      text: <span class="string">'Source: runoob.com'</span>  </span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> xAxis = &#123;</span></span><br><span class="line"><span class="javascript">      categories: [<span class="string">'Jan'</span>,<span class="string">'Feb'</span>,<span class="string">'Mar'</span>,<span class="string">'Apr'</span>,<span class="string">'May'</span>,<span class="string">'Jun'</span>,<span class="string">'Jul'</span>,<span class="string">'Aug'</span>,<span class="string">'Sep'</span>,<span class="string">'Oct'</span>,<span class="string">'Nov'</span>,<span class="string">'Dec'</span>],</span></span><br><span class="line"><span class="javascript">      crosshair: <span class="literal">true</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> yAxis = &#123;</span></span><br><span class="line"><span class="undefined">      min: 0,</span></span><br><span class="line"><span class="undefined">      title: &#123;</span></span><br><span class="line"><span class="javascript">         text: <span class="string">'Rainfall (mm)'</span>         </span></span><br><span class="line"><span class="undefined">      &#125;      </span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> tooltip = &#123;</span></span><br><span class="line"><span class="xml">      headerFormat: '<span class="tag">&lt;<span class="name">span</span> <span class="attr">style</span>=<span class="string">"font-size:10px"</span>&gt;</span>&#123;point.key&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span><span class="tag">&lt;<span class="name">table</span>&gt;</span>',</span></span><br><span class="line"><span class="xml">      pointFormat: '<span class="tag">&lt;<span class="name">tr</span>&gt;</span><span class="tag">&lt;<span class="name">td</span> <span class="attr">style</span>=<span class="string">"color:&#123;series.color&#125;;padding:0"</span>&gt;</span>&#123;series.name&#125;: <span class="tag">&lt;/<span class="name">td</span>&gt;</span>' +</span></span><br><span class="line"><span class="xml">         '<span class="tag">&lt;<span class="name">td</span> <span class="attr">style</span>=<span class="string">"padding:0"</span>&gt;</span><span class="tag">&lt;<span class="name">b</span>&gt;</span>&#123;point.y:.1f&#125; mm<span class="tag">&lt;/<span class="name">b</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">tr</span>&gt;</span>',</span></span><br><span class="line"><span class="javascript">      footerFormat: <span class="string">'&lt;/table&gt;'</span>,</span></span><br><span class="line"><span class="javascript">      shared: <span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript">      useHTML: <span class="literal">true</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> plotOptions = &#123;</span></span><br><span class="line"><span class="undefined">      column: &#123;</span></span><br><span class="line"><span class="undefined">         pointPadding: 0.2,</span></span><br><span class="line"><span class="undefined">         borderWidth: 0</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   &#125;;  </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> credits = &#123;</span></span><br><span class="line"><span class="javascript">      enabled: <span class="literal">false</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="undefined">   </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> series= [&#123;</span></span><br><span class="line"><span class="javascript">        name: <span class="string">'Tokyo'</span>,</span></span><br><span class="line"><span class="undefined">            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]</span></span><br><span class="line"><span class="undefined">        &#125;, &#123;</span></span><br><span class="line"><span class="javascript">            name: <span class="string">'New York'</span>,</span></span><br><span class="line"><span class="undefined">            data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]</span></span><br><span class="line"><span class="undefined">        &#125;, &#123;</span></span><br><span class="line"><span class="javascript">            name: <span class="string">'London'</span>,</span></span><br><span class="line"><span class="undefined">            data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]</span></span><br><span class="line"><span class="undefined">        &#125;, &#123;</span></span><br><span class="line"><span class="javascript">            name: <span class="string">'Berlin'</span>,</span></span><br><span class="line"><span class="undefined">            data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]</span></span><br><span class="line"><span class="undefined">   &#125;];     </span></span><br><span class="line"><span class="undefined">      </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> json = &#123;&#125;;   </span></span><br><span class="line"><span class="undefined">   json.chart = chart; </span></span><br><span class="line"><span class="undefined">   json.title = title;   </span></span><br><span class="line"><span class="undefined">   json.subtitle = subtitle; </span></span><br><span class="line"><span class="undefined">   json.tooltip = tooltip;</span></span><br><span class="line"><span class="undefined">   json.xAxis = xAxis;</span></span><br><span class="line"><span class="undefined">   json.yAxis = yAxis;  </span></span><br><span class="line"><span class="undefined">   json.series = series;</span></span><br><span class="line"><span class="undefined">   json.plotOptions = plotOptions;  </span></span><br><span class="line"><span class="undefined">   json.credits = credits;</span></span><br><span class="line"><span class="javascript">   $(<span class="string">'#container'</span>).highcharts(json);</span></span><br><span class="line"><span class="undefined">  </span></span><br><span class="line"><span class="undefined">&#125;);</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>示例2从表格中读取数据</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">   <span class="tag">&lt;<span class="name">title</span>&gt;</span>Highcharts 教程 | 菜鸟教程(runoob.com)<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">   <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">   <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://code.highcharts.com/highcharts.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span> </span><br><span class="line">   <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://code.highcharts.com/modules/data.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span>     </span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"container"</span> <span class="attr">style</span>=<span class="string">"width: 550px; height: 400px; margin: 0 auto"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">language</span>=<span class="string">"JavaScript"</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123; </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> data = &#123;</span></span><br><span class="line"><span class="javascript">      table: <span class="string">'datatable'</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> chart = &#123;</span></span><br><span class="line"><span class="javascript">      type: <span class="string">'column'</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> title = &#123;</span></span><br><span class="line"><span class="javascript">      text: <span class="string">'从网页中的 HTML 表格中读取数据'</span>   </span></span><br><span class="line"><span class="undefined">   &#125;;      </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> yAxis = &#123;</span></span><br><span class="line"><span class="javascript">      allowDecimals: <span class="literal">false</span>,</span></span><br><span class="line"><span class="undefined">      title: &#123;</span></span><br><span class="line"><span class="javascript">         text: <span class="string">'Units'</span></span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> tooltip = &#123;</span></span><br><span class="line"><span class="javascript">      formatter: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">         <span class="keyword">return</span> <span class="string">'&lt;b&gt;'</span> + <span class="keyword">this</span>.series.name + <span class="string">'&lt;/b&gt;&lt;br/&gt;'</span> +</span></span><br><span class="line"><span class="javascript">            <span class="keyword">this</span>.point.y + <span class="string">' '</span> + <span class="keyword">this</span>.point.name.toLowerCase();</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> credits = &#123;</span></span><br><span class="line"><span class="javascript">      enabled: <span class="literal">false</span></span></span><br><span class="line"><span class="undefined">   &#125;;  </span></span><br><span class="line"><span class="undefined">      </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> json = &#123;&#125;;   </span></span><br><span class="line"><span class="undefined">   json.chart = chart; </span></span><br><span class="line"><span class="undefined">   json.title = title; </span></span><br><span class="line"><span class="undefined">   json.data = data;</span></span><br><span class="line"><span class="undefined">   json.yAxis = yAxis;</span></span><br><span class="line"><span class="undefined">   json.credits = credits;  </span></span><br><span class="line"><span class="undefined">   json.tooltip = tooltip;  </span></span><br><span class="line"><span class="javascript">   $(<span class="string">'#container'</span>).highcharts(json);</span></span><br><span class="line"><span class="undefined">&#125;);</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">table</span> <span class="attr">id</span>=<span class="string">"datatable"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">thead</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">tr</span>&gt;</span><span class="tag">&lt;<span class="name">th</span>&gt;</span><span class="tag">&lt;/<span class="name">th</span>&gt;</span><span class="tag">&lt;<span class="name">th</span>&gt;</span>Jane<span class="tag">&lt;/<span class="name">th</span>&gt;</span><span class="tag">&lt;<span class="name">th</span>&gt;</span>John<span class="tag">&lt;/<span class="name">th</span>&gt;</span><span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">thead</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">tbody</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">tr</span>&gt;</span><span class="tag">&lt;<span class="name">th</span>&gt;</span>Apples<span class="tag">&lt;/<span class="name">th</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span>3<span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span>2<span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">tr</span>&gt;</span><span class="tag">&lt;<span class="name">th</span>&gt;</span>Pears<span class="tag">&lt;/<span class="name">th</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span>2<span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span>0<span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">tr</span>&gt;</span><span class="tag">&lt;<span class="name">th</span>&gt;</span>Plums<span class="tag">&lt;/<span class="name">th</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span>5<span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span>11<span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">tr</span>&gt;</span><span class="tag">&lt;<span class="name">th</span>&gt;</span>Bananas<span class="tag">&lt;/<span class="name">th</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span>1<span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span>1<span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">tr</span>&gt;</span><span class="tag">&lt;<span class="name">th</span>&gt;</span>Oranges<span class="tag">&lt;/<span class="name">th</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span>2<span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span>4<span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">tbody</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">table</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="饼图示例"><a href="#饼图示例" class="headerlink" title="饼图示例"></a>饼图示例</h3><p>示例1基本饼图</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>Highcharts 教程 | 菜鸟教程(runoob.com)<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://code.highcharts.com/highcharts.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"container"</span> <span class="attr">style</span>=<span class="string">"width: 550px; height: 400px; margin: 0 auto"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">language</span>=<span class="string">"JavaScript"</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;  </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> chart = &#123;</span></span><br><span class="line"><span class="javascript">       plotBackgroundColor: <span class="literal">null</span>,</span></span><br><span class="line"><span class="javascript">       plotBorderWidth: <span class="literal">null</span>,</span></span><br><span class="line"><span class="javascript">       plotShadow: <span class="literal">false</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> title = &#123;</span></span><br><span class="line"><span class="javascript">      text: <span class="string">'2014 年各浏览器市场占有比例'</span>   </span></span><br><span class="line"><span class="undefined">   &#125;;      </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> tooltip = &#123;</span></span><br><span class="line"><span class="xml">      pointFormat: '&#123;series.name&#125;: <span class="tag">&lt;<span class="name">b</span>&gt;</span>&#123;point.percentage:.1f&#125;%<span class="tag">&lt;/<span class="name">b</span>&gt;</span>'</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> plotOptions = &#123;</span></span><br><span class="line"><span class="undefined">      pie: &#123;</span></span><br><span class="line"><span class="javascript">         allowPointSelect: <span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript">         cursor: <span class="string">'pointer'</span>,</span></span><br><span class="line"><span class="undefined">         dataLabels: &#123;</span></span><br><span class="line"><span class="javascript">            enabled: <span class="literal">true</span>,</span></span><br><span class="line"><span class="xml">            format: '<span class="tag">&lt;<span class="name">b</span>&gt;</span>&#123;point.name&#125;%<span class="tag">&lt;/<span class="name">b</span>&gt;</span>: &#123;point.percentage:.1f&#125; %',</span></span><br><span class="line"><span class="undefined">            style: &#123;</span></span><br><span class="line"><span class="javascript">               color: (Highcharts.theme &amp;&amp; Highcharts.theme.contrastTextColor) || <span class="string">'black'</span></span></span><br><span class="line"><span class="undefined">            &#125;</span></span><br><span class="line"><span class="undefined">         &#125;</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> series= [&#123;</span></span><br><span class="line"><span class="javascript">      type: <span class="string">'pie'</span>,</span></span><br><span class="line"><span class="javascript">      name: <span class="string">'Browser share'</span>,</span></span><br><span class="line"><span class="undefined">      data: [</span></span><br><span class="line"><span class="javascript">         [<span class="string">'Firefox'</span>,   <span class="number">45.0</span>],</span></span><br><span class="line"><span class="javascript">         [<span class="string">'IE'</span>,       <span class="number">26.8</span>],</span></span><br><span class="line"><span class="undefined">         &#123;</span></span><br><span class="line"><span class="javascript">            name: <span class="string">'Chrome'</span>,</span></span><br><span class="line"><span class="undefined">            y: 12.8,</span></span><br><span class="line"><span class="javascript">            sliced: <span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript">            selected: <span class="literal">true</span></span></span><br><span class="line"><span class="undefined">         &#125;,</span></span><br><span class="line"><span class="javascript">         [<span class="string">'Safari'</span>,    <span class="number">8.5</span>],</span></span><br><span class="line"><span class="javascript">         [<span class="string">'Opera'</span>,     <span class="number">6.2</span>],</span></span><br><span class="line"><span class="javascript">         [<span class="string">'Others'</span>,   <span class="number">0.7</span>]</span></span><br><span class="line"><span class="undefined">      ]</span></span><br><span class="line"><span class="undefined">   &#125;];     </span></span><br><span class="line"><span class="undefined">      </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> json = &#123;&#125;;   </span></span><br><span class="line"><span class="undefined">   json.chart = chart; </span></span><br><span class="line"><span class="undefined">   json.title = title;     </span></span><br><span class="line"><span class="undefined">   json.tooltip = tooltip;  </span></span><br><span class="line"><span class="undefined">   json.series = series;</span></span><br><span class="line"><span class="undefined">   json.plotOptions = plotOptions;</span></span><br><span class="line"><span class="javascript">   $(<span class="string">'#container'</span>).highcharts(json);  </span></span><br><span class="line"><span class="undefined">&#125;);</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>示例2显示图例饼图</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>Highcharts 教程 | 菜鸟教程(runoob.com)<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://code.highcharts.com/highcharts.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"container"</span> <span class="attr">style</span>=<span class="string">"width: 550px; height: 400px; margin: 0 auto"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">language</span>=<span class="string">"JavaScript"</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;  </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> chart = &#123;</span></span><br><span class="line"><span class="javascript">       plotBackgroundColor: <span class="literal">null</span>,</span></span><br><span class="line"><span class="javascript">       plotBorderWidth: <span class="literal">null</span>,</span></span><br><span class="line"><span class="javascript">       plotShadow: <span class="literal">false</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> title = &#123;</span></span><br><span class="line"><span class="javascript">      text: <span class="string">'Browser market shares at a specific website, 2014'</span>   </span></span><br><span class="line"><span class="undefined">   &#125;;      </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> tooltip = &#123;</span></span><br><span class="line"><span class="xml">      pointFormat: '&#123;series.name&#125;: <span class="tag">&lt;<span class="name">b</span>&gt;</span>&#123;point.percentage:.1f&#125;%<span class="tag">&lt;/<span class="name">b</span>&gt;</span>'</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> plotOptions = &#123;</span></span><br><span class="line"><span class="undefined">      pie: &#123;</span></span><br><span class="line"><span class="javascript">         allowPointSelect: <span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript">         cursor: <span class="string">'pointer'</span>,</span></span><br><span class="line"><span class="undefined">         dataLabels: &#123;</span></span><br><span class="line"><span class="javascript">            enabled: <span class="literal">false</span>           </span></span><br><span class="line"><span class="undefined">         &#125;,</span></span><br><span class="line"><span class="javascript">         showInLegend: <span class="literal">true</span></span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> series= [&#123;</span></span><br><span class="line"><span class="javascript">      type: <span class="string">'pie'</span>,</span></span><br><span class="line"><span class="javascript">      name: <span class="string">'Browser share'</span>,</span></span><br><span class="line"><span class="undefined">      data: [</span></span><br><span class="line"><span class="javascript">         [<span class="string">'Firefox'</span>,   <span class="number">45.0</span>],</span></span><br><span class="line"><span class="javascript">         [<span class="string">'IE'</span>,       <span class="number">26.8</span>],</span></span><br><span class="line"><span class="undefined">         &#123;</span></span><br><span class="line"><span class="javascript">            name: <span class="string">'Chrome'</span>,</span></span><br><span class="line"><span class="undefined">            y: 12.8,</span></span><br><span class="line"><span class="javascript">            sliced: <span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript">            selected: <span class="literal">true</span></span></span><br><span class="line"><span class="undefined">         &#125;,</span></span><br><span class="line"><span class="javascript">         [<span class="string">'Safari'</span>,    <span class="number">8.5</span>],</span></span><br><span class="line"><span class="javascript">         [<span class="string">'Opera'</span>,     <span class="number">6.2</span>],</span></span><br><span class="line"><span class="javascript">         [<span class="string">'Others'</span>,   <span class="number">0.7</span>]</span></span><br><span class="line"><span class="undefined">      ]</span></span><br><span class="line"><span class="undefined">   &#125;];     </span></span><br><span class="line"><span class="undefined">      </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> json = &#123;&#125;;   </span></span><br><span class="line"><span class="undefined">   json.chart = chart; </span></span><br><span class="line"><span class="undefined">   json.title = title;     </span></span><br><span class="line"><span class="undefined">   json.tooltip = tooltip;  </span></span><br><span class="line"><span class="undefined">   json.series = series;</span></span><br><span class="line"><span class="undefined">   json.plotOptions = plotOptions;</span></span><br><span class="line"><span class="javascript">   $(<span class="string">'#container'</span>).highcharts(json);  </span></span><br><span class="line"><span class="undefined">&#125;);</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>示例3向下钻取饼图</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>Highcharts 教程 | 菜鸟教程(runoob.com)<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://code.highcharts.com/highcharts.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://code.highcharts.com/modules/drilldown.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://code.highcharts.com/modules/data.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"container"</span> <span class="attr">style</span>=<span class="string">"width: 550px; height: 400px; margin: 0 auto"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">language</span>=<span class="string">"JavaScript"</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123; </span></span><br><span class="line"><span class="undefined"> </span></span><br><span class="line"><span class="undefined">   Highcharts.data(&#123;</span></span><br><span class="line"><span class="javascript">      csv: <span class="built_in">document</span>.getElementById(<span class="string">'tsv'</span>).innerHTML,</span></span><br><span class="line"><span class="javascript">      itemDelimiter: <span class="string">'\t'</span>,</span></span><br><span class="line"><span class="javascript">      parsed: <span class="function"><span class="keyword">function</span> (<span class="params">columns</span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">         <span class="keyword">var</span> brands = &#123;&#125;, brandsData = [], versions = &#123;&#125;, drilldownSeries = [];</span></span><br><span class="line"><span class="undefined">         </span></span><br><span class="line"><span class="javascript">		 <span class="comment">// Parse percentage strings</span></span></span><br><span class="line"><span class="javascript">         columns[<span class="number">1</span>] = $.map(columns[<span class="number">1</span>], <span class="function"><span class="keyword">function</span> (<span class="params">value</span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">            <span class="keyword">if</span> (value.indexOf(<span class="string">'%'</span>) === value.length - <span class="number">1</span>) &#123;</span></span><br><span class="line"><span class="javascript">               value = <span class="built_in">parseFloat</span>(value);</span></span><br><span class="line"><span class="undefined">            &#125;</span></span><br><span class="line"><span class="javascript">            <span class="keyword">return</span> value;</span></span><br><span class="line"><span class="undefined">         &#125;);</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">         $.each(columns[<span class="number">0</span>], <span class="function"><span class="keyword">function</span> (<span class="params">i, name</span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">            <span class="keyword">var</span> brand, version;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">            <span class="keyword">if</span> (i &gt; <span class="number">0</span>) &#123;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">               <span class="comment">// Remove special edition notes</span></span></span><br><span class="line"><span class="javascript">               name = name.split(<span class="string">' -'</span>)[<span class="number">0</span>];</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">               <span class="comment">// Split into brand and version</span></span></span><br><span class="line"><span class="javascript">               version = name.match(<span class="regexp">/([0-9]+[\.0-9x]*)/</span>);</span></span><br><span class="line"><span class="javascript">               <span class="keyword">if</span> (version) &#123;</span></span><br><span class="line"><span class="undefined">                  version = version[0];</span></span><br><span class="line"><span class="undefined">               &#125;</span></span><br><span class="line"><span class="javascript">               brand = name.replace(version, <span class="string">''</span>);</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">               <span class="comment">// Create the main data</span></span></span><br><span class="line"><span class="javascript">               <span class="keyword">if</span> (!brands[brand]) &#123;</span></span><br><span class="line"><span class="undefined">                  brands[brand] = columns[1][i];</span></span><br><span class="line"><span class="javascript">               &#125; <span class="keyword">else</span> &#123;</span></span><br><span class="line"><span class="undefined">                  brands[brand] += columns[1][i];</span></span><br><span class="line"><span class="undefined">               &#125;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">               <span class="comment">// Create the version data</span></span></span><br><span class="line"><span class="javascript">               <span class="keyword">if</span> (version !== <span class="literal">null</span>) &#123;</span></span><br><span class="line"><span class="javascript">                  <span class="keyword">if</span> (!versions[brand]) &#123;</span></span><br><span class="line"><span class="undefined">                     versions[brand] = [];</span></span><br><span class="line"><span class="undefined">                  &#125;</span></span><br><span class="line"><span class="javascript">                  versions[brand].push([<span class="string">'v'</span> + version, columns[<span class="number">1</span>][i]]);</span></span><br><span class="line"><span class="undefined">               &#125;</span></span><br><span class="line"><span class="undefined">            &#125;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined">         &#125;);</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">         $.each(brands, <span class="function"><span class="keyword">function</span> (<span class="params">name, y</span>) </span>&#123;</span></span><br><span class="line"><span class="undefined">            brandsData.push(&#123;</span></span><br><span class="line"><span class="undefined">               name: name,</span></span><br><span class="line"><span class="undefined">               y: y,</span></span><br><span class="line"><span class="javascript">               drilldown: versions[name] ? name : <span class="literal">null</span></span></span><br><span class="line"><span class="undefined">            &#125;);</span></span><br><span class="line"><span class="undefined">         &#125;);</span></span><br><span class="line"><span class="javascript">         $.each(versions, <span class="function"><span class="keyword">function</span> (<span class="params">key, value</span>) </span>&#123;</span></span><br><span class="line"><span class="undefined">            drilldownSeries.push(&#123;</span></span><br><span class="line"><span class="undefined">                name: key,</span></span><br><span class="line"><span class="undefined">                id: key,</span></span><br><span class="line"><span class="undefined">                data: value</span></span><br><span class="line"><span class="undefined">            &#125;);</span></span><br><span class="line"><span class="undefined">         &#125;); </span></span><br><span class="line"><span class="undefined"> </span></span><br><span class="line"><span class="javascript">         <span class="keyword">var</span> chart = &#123;</span></span><br><span class="line"><span class="javascript">            type: <span class="string">'pie'</span></span></span><br><span class="line"><span class="undefined">         &#125;;</span></span><br><span class="line"><span class="javascript">         <span class="keyword">var</span> title = &#123;</span></span><br><span class="line"><span class="javascript">            text: <span class="string">'Browser market shares. November, 2013'</span>   </span></span><br><span class="line"><span class="undefined">         &#125;;    </span></span><br><span class="line"><span class="javascript">         <span class="keyword">var</span> subtitle = &#123;</span></span><br><span class="line"><span class="javascript">            text: <span class="string">'Click the slices to view versions. Source: netmarketshare.com.'</span></span></span><br><span class="line"><span class="undefined">         &#125;;</span></span><br><span class="line"><span class="javascript">         <span class="keyword">var</span> xAxis = &#123;</span></span><br><span class="line"><span class="javascript">            type: <span class="string">'category'</span>      </span></span><br><span class="line"><span class="undefined">         &#125;;</span></span><br><span class="line"><span class="javascript">         <span class="keyword">var</span> yAxis =&#123;</span></span><br><span class="line"><span class="undefined">            title: &#123;</span></span><br><span class="line"><span class="javascript">              text: <span class="string">'Total percent market share'</span></span></span><br><span class="line"><span class="undefined">            &#125;</span></span><br><span class="line"><span class="undefined">         &#125;;  </span></span><br><span class="line"><span class="javascript">         <span class="keyword">var</span> tooltip = &#123;</span></span><br><span class="line"><span class="xml">            headerFormat: '<span class="tag">&lt;<span class="name">span</span> <span class="attr">style</span>=<span class="string">"font-size:11px"</span>&gt;</span>&#123;series.name&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span><span class="tag">&lt;<span class="name">br</span>&gt;</span>',</span></span><br><span class="line"><span class="xml">            pointFormat: '<span class="tag">&lt;<span class="name">span</span> <span class="attr">style</span>=<span class="string">"color:&#123;point.color&#125;"</span>&gt;</span>&#123;point.name&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span>: <span class="tag">&lt;<span class="name">b</span>&gt;</span>&#123;point.y:.2f&#125;%<span class="tag">&lt;/<span class="name">b</span>&gt;</span> of total<span class="tag">&lt;<span class="name">br</span>/&gt;</span>'</span></span><br><span class="line"><span class="undefined">         &#125;;   </span></span><br><span class="line"><span class="javascript">         <span class="keyword">var</span> credits = &#123;</span></span><br><span class="line"><span class="javascript">            enabled: <span class="literal">false</span></span></span><br><span class="line"><span class="undefined">         &#125;;</span></span><br><span class="line"><span class="javascript">         <span class="keyword">var</span> series= [&#123;</span></span><br><span class="line"><span class="javascript">            name: <span class="string">'Brands'</span>,</span></span><br><span class="line"><span class="javascript">            colorByPoint: <span class="literal">true</span>,</span></span><br><span class="line"><span class="undefined">            data: brandsData</span></span><br><span class="line"><span class="undefined">         &#125;];</span></span><br><span class="line"><span class="javascript">         <span class="keyword">var</span> drilldown= &#123;</span></span><br><span class="line"><span class="undefined">            series: drilldownSeries</span></span><br><span class="line"><span class="undefined">         &#125;   </span></span><br><span class="line"><span class="undefined">      </span></span><br><span class="line"><span class="javascript">         <span class="keyword">var</span> json = &#123;&#125;;   </span></span><br><span class="line"><span class="undefined">         json.chart = chart; </span></span><br><span class="line"><span class="undefined">         json.title = title;   </span></span><br><span class="line"><span class="undefined">         json.subtitle = subtitle;</span></span><br><span class="line"><span class="undefined">         json.xAxis = xAxis;</span></span><br><span class="line"><span class="undefined">         json.yAxis = yAxis;   </span></span><br><span class="line"><span class="undefined">         json.tooltip = tooltip;   </span></span><br><span class="line"><span class="undefined">         json.credits = credits;</span></span><br><span class="line"><span class="undefined">         json.series = series;</span></span><br><span class="line"><span class="undefined">         json.drilldown = drilldown;</span></span><br><span class="line"><span class="javascript">         $(<span class="string">'#container'</span>).highcharts(json);</span></span><br><span class="line"><span class="undefined">     &#125;</span></span><br><span class="line"><span class="undefined">   &#125;);</span></span><br><span class="line"><span class="undefined">&#125;);</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- Data from www.netmarketshare.com. Select Browsers =&gt; Desktop share by version. Download as tsv. --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">pre</span> <span class="attr">id</span>=<span class="string">"tsv"</span> <span class="attr">style</span>=<span class="string">"display:none"</span>&gt;</span></span><br><span class="line">Browser Version	Total Market Share</span><br><span class="line">Microsoft Internet Explorer 8.0	26.61%</span><br><span class="line">Microsoft Internet Explorer 9.0	16.96%</span><br><span class="line">Chrome 18.0	8.01%</span><br><span class="line">Chrome 19.0	7.73%</span><br><span class="line">Firefox 12	6.72%</span><br><span class="line">Microsoft Internet Explorer 6.0	6.40%</span><br><span class="line">Firefox 11	4.72%</span><br><span class="line">Microsoft Internet Explorer 7.0	3.55%</span><br><span class="line">Safari 5.1	3.53%</span><br><span class="line">Firefox 13	2.16%</span><br><span class="line">Firefox 3.6	1.87%</span><br><span class="line">Opera 11.x	1.30%</span><br><span class="line">Chrome 17.0	1.13%</span><br><span class="line">Firefox 10	0.90%</span><br><span class="line">Safari 5.0	0.85%</span><br><span class="line">Firefox 9.0	0.65%</span><br><span class="line">Firefox 8.0	0.55%</span><br><span class="line">Firefox 4.0	0.50%</span><br><span class="line">Chrome 16.0	0.45%</span><br><span class="line">Firefox 3.0	0.36%</span><br><span class="line">Firefox 3.5	0.36%</span><br><span class="line">Firefox 6.0	0.32%</span><br><span class="line">Firefox 5.0	0.31%</span><br><span class="line">Firefox 7.0	0.29%</span><br><span class="line">Proprietary or Undetectable	0.29%</span><br><span class="line">Chrome 18.0 - Maxthon Edition	0.26%</span><br><span class="line">Chrome 14.0	0.25%</span><br><span class="line">Chrome 20.0	0.24%</span><br><span class="line">Chrome 15.0	0.18%</span><br><span class="line">Chrome 12.0	0.16%</span><br><span class="line">Opera 12.x	0.15%</span><br><span class="line">Safari 4.0	0.14%</span><br><span class="line">Chrome 13.0	0.13%</span><br><span class="line">Safari 4.1	0.12%</span><br><span class="line">Chrome 11.0	0.10%</span><br><span class="line">Firefox 14	0.10%</span><br><span class="line">Firefox 2.0	0.09%</span><br><span class="line">Chrome 10.0	0.09%</span><br><span class="line">Opera 10.x	0.09%</span><br><span class="line">Microsoft Internet Explorer 8.0 - Tencent Traveler Edition	0.09%</span><br><span class="line"><span class="tag">&lt;/<span class="name">pre</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="散点图示例"><a href="#散点图示例" class="headerlink" title="散点图示例"></a>散点图示例</h3><p>示例1基本散点图</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>Highcharts 教程 | 菜鸟教程(runoob.com)<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://code.highcharts.com/highcharts.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"container"</span> <span class="attr">style</span>=<span class="string">"width: 550px; height: 400px; margin: 0 auto"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">language</span>=<span class="string">"JavaScript"</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;  </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> chart = &#123;</span></span><br><span class="line"><span class="javascript">      type: <span class="string">'scatter'</span>,</span></span><br><span class="line"><span class="javascript">	  zoomType: <span class="string">'xy'</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> title = &#123;</span></span><br><span class="line"><span class="javascript">      text: <span class="string">'Height Versus Weight of 507 Individuals by Gender'</span>   </span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> subtitle = &#123;</span></span><br><span class="line"><span class="javascript">      text: <span class="string">'Source: Heinz  2003'</span>  </span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> xAxis = &#123;</span></span><br><span class="line"><span class="undefined">      title: &#123;</span></span><br><span class="line"><span class="javascript">      enabled: <span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript">         text: <span class="string">'Height (cm)'</span></span></span><br><span class="line"><span class="undefined">      &#125;,</span></span><br><span class="line"><span class="javascript">      startOnTick: <span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript">      endOnTick: <span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript">      showLastLabel: <span class="literal">true</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> yAxis = &#123;</span></span><br><span class="line"><span class="undefined">      title: &#123;</span></span><br><span class="line"><span class="javascript">         text: <span class="string">'Weight (kg)'</span></span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> legend = &#123;   </span></span><br><span class="line"><span class="javascript">      layout: <span class="string">'vertical'</span>,</span></span><br><span class="line"><span class="javascript">      align: <span class="string">'left'</span>,</span></span><br><span class="line"><span class="javascript">      verticalAlign: <span class="string">'top'</span>,</span></span><br><span class="line"><span class="undefined">      x: 100,</span></span><br><span class="line"><span class="undefined">      y: 70,</span></span><br><span class="line"><span class="javascript">      floating: <span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript">      backgroundColor: (Highcharts.theme &amp;&amp; Highcharts.theme.legendBackgroundColor) || <span class="string">'#FFFFFF'</span>,</span></span><br><span class="line"><span class="undefined">      borderWidth: 1</span></span><br><span class="line"><span class="undefined">   &#125;  </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> plotOptions = &#123;</span></span><br><span class="line"><span class="undefined">      scatter: &#123;</span></span><br><span class="line"><span class="undefined">         marker: &#123;</span></span><br><span class="line"><span class="undefined">            radius: 5,</span></span><br><span class="line"><span class="undefined">            states: &#123;</span></span><br><span class="line"><span class="undefined">               hover: &#123;</span></span><br><span class="line"><span class="javascript">                  enabled: <span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript">                  lineColor: <span class="string">'rgb(100,100,100)'</span></span></span><br><span class="line"><span class="undefined">               &#125;</span></span><br><span class="line"><span class="undefined">            &#125;</span></span><br><span class="line"><span class="undefined">         &#125;,</span></span><br><span class="line"><span class="undefined">         states: &#123;</span></span><br><span class="line"><span class="undefined">            hover: &#123;</span></span><br><span class="line"><span class="undefined">               marker: &#123;</span></span><br><span class="line"><span class="javascript">                  enabled: <span class="literal">false</span></span></span><br><span class="line"><span class="undefined">               &#125;</span></span><br><span class="line"><span class="undefined">            &#125;</span></span><br><span class="line"><span class="undefined">         &#125;,</span></span><br><span class="line"><span class="undefined">         tooltip: &#123;</span></span><br><span class="line"><span class="xml">            headerFormat: '<span class="tag">&lt;<span class="name">b</span>&gt;</span>&#123;series.name&#125;<span class="tag">&lt;/<span class="name">b</span>&gt;</span><span class="tag">&lt;<span class="name">br</span>&gt;</span>',</span></span><br><span class="line"><span class="javascript">            pointFormat: <span class="string">'&#123;point.x&#125; cm, &#123;point.y&#125; kg'</span></span></span><br><span class="line"><span class="undefined">         &#125;</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> series= [&#123;</span></span><br><span class="line"><span class="javascript">            name: <span class="string">'Female'</span>,</span></span><br><span class="line"><span class="javascript">            color: <span class="string">'rgba(223, 83, 83, .5)'</span>,</span></span><br><span class="line"><span class="undefined">            data: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],</span></span><br><span class="line"><span class="undefined">                [170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2],</span></span><br><span class="line"><span class="undefined">                [172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0],</span></span><br><span class="line"><span class="undefined">                [147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8],</span></span><br><span class="line"><span class="undefined">                [159.5, 50.6], [175.0, 82.5], [166.8, 57.2], [176.5, 87.8], [170.2, 72.8],</span></span><br><span class="line"><span class="undefined">                [174.0, 54.5], [173.0, 59.8], [179.9, 67.3], [170.5, 67.8], [160.0, 47.0],</span></span><br><span class="line"><span class="undefined">                [154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [152.0, 45.8],</span></span><br><span class="line"><span class="undefined">                [162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [166.4, 56.6],</span></span><br><span class="line"><span class="undefined">                [168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [161.3, 60.3],</span></span><br><span class="line"><span class="undefined">                [167.6, 58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8],</span></span><br><span class="line"><span class="undefined">                [167.6, 61.0], [160.7, 69.1], [163.2, 55.9], [152.4, 46.5], [157.5, 54.3],</span></span><br><span class="line"><span class="undefined">                [168.3, 54.8], [180.3, 60.7], [165.5, 60.0], [165.0, 62.0], [164.5, 60.3],</span></span><br><span class="line"><span class="undefined">                [156.0, 52.7], [160.0, 74.3], [163.0, 62.0], [165.7, 73.1], [161.0, 80.0],</span></span><br><span class="line"><span class="undefined">                [162.0, 54.7], [166.0, 53.2], [174.0, 75.7], [172.7, 61.1], [167.6, 55.7],</span></span><br><span class="line"><span class="undefined">                [151.1, 48.7], [164.5, 52.3], [163.5, 50.0], [152.0, 59.3], [169.0, 62.5],</span></span><br><span class="line"><span class="undefined">                [164.0, 55.7], [161.2, 54.8], [155.0, 45.9], [170.0, 70.6], [176.2, 67.2],</span></span><br><span class="line"><span class="undefined">                [170.0, 69.4], [162.5, 58.2], [170.3, 64.8], [164.1, 71.6], [169.5, 52.8],</span></span><br><span class="line"><span class="undefined">                [163.2, 59.8], [154.5, 49.0], [159.8, 50.0], [173.2, 69.2], [170.0, 55.9],</span></span><br><span class="line"><span class="undefined">                [161.4, 63.4], [169.0, 58.2], [166.2, 58.6], [159.4, 45.7], [162.5, 52.2],</span></span><br><span class="line"><span class="undefined">                [159.0, 48.6], [162.8, 57.8], [159.0, 55.6], [179.8, 66.8], [162.9, 59.4],</span></span><br><span class="line"><span class="undefined">                [161.0, 53.6], [151.1, 73.2], [168.2, 53.4], [168.9, 69.0], [173.2, 58.4],</span></span><br><span class="line"><span class="undefined">                [171.8, 56.2], [178.0, 70.6], [164.3, 59.8], [163.0, 72.0], [168.5, 65.2],</span></span><br><span class="line"><span class="undefined">                [166.8, 56.6], [172.7, 105.2], [163.5, 51.8], [169.4, 63.4], [167.8, 59.0],</span></span><br><span class="line"><span class="undefined">                [159.5, 47.6], [167.6, 63.0], [161.2, 55.2], [160.0, 45.0], [163.2, 54.0],</span></span><br><span class="line"><span class="undefined">                [162.2, 50.2], [161.3, 60.2], [149.5, 44.8], [157.5, 58.8], [163.2, 56.4],</span></span><br><span class="line"><span class="undefined">                [172.7, 62.0], [155.0, 49.2], [156.5, 67.2], [164.0, 53.8], [160.9, 54.4],</span></span><br><span class="line"><span class="undefined">                [162.8, 58.0], [167.0, 59.8], [160.0, 54.8], [160.0, 43.2], [168.9, 60.5],</span></span><br><span class="line"><span class="undefined">                [158.2, 46.4], [156.0, 64.4], [160.0, 48.8], [167.1, 62.2], [158.0, 55.5],</span></span><br><span class="line"><span class="undefined">                [167.6, 57.8], [156.0, 54.6], [162.1, 59.2], [173.4, 52.7], [159.8, 53.2],</span></span><br><span class="line"><span class="undefined">                [170.5, 64.5], [159.2, 51.8], [157.5, 56.0], [161.3, 63.6], [162.6, 63.2],</span></span><br><span class="line"><span class="undefined">                [160.0, 59.5], [168.9, 56.8], [165.1, 64.1], [162.6, 50.0], [165.1, 72.3],</span></span><br><span class="line"><span class="undefined">                [166.4, 55.0], [160.0, 55.9], [152.4, 60.4], [170.2, 69.1], [162.6, 84.5],</span></span><br><span class="line"><span class="undefined">                [170.2, 55.9], [158.8, 55.5], [172.7, 69.5], [167.6, 76.4], [162.6, 61.4],</span></span><br><span class="line"><span class="undefined">                [167.6, 65.9], [156.2, 58.6], [175.2, 66.8], [172.1, 56.6], [162.6, 58.6],</span></span><br><span class="line"><span class="undefined">                [160.0, 55.9], [165.1, 59.1], [182.9, 81.8], [166.4, 70.7], [165.1, 56.8],</span></span><br><span class="line"><span class="undefined">                [177.8, 60.0], [165.1, 58.2], [175.3, 72.7], [154.9, 54.1], [158.8, 49.1],</span></span><br><span class="line"><span class="undefined">                [172.7, 75.9], [168.9, 55.0], [161.3, 57.3], [167.6, 55.0], [165.1, 65.5],</span></span><br><span class="line"><span class="undefined">                [175.3, 65.5], [157.5, 48.6], [163.8, 58.6], [167.6, 63.6], [165.1, 55.2],</span></span><br><span class="line"><span class="undefined">                [165.1, 62.7], [168.9, 56.6], [162.6, 53.9], [164.5, 63.2], [176.5, 73.6],</span></span><br><span class="line"><span class="undefined">                [168.9, 62.0], [175.3, 63.6], [159.4, 53.2], [160.0, 53.4], [170.2, 55.0],</span></span><br><span class="line"><span class="undefined">                [162.6, 70.5], [167.6, 54.5], [162.6, 54.5], [160.7, 55.9], [160.0, 59.0],</span></span><br><span class="line"><span class="undefined">                [157.5, 63.6], [162.6, 54.5], [152.4, 47.3], [170.2, 67.7], [165.1, 80.9],</span></span><br><span class="line"><span class="undefined">                [172.7, 70.5], [165.1, 60.9], [170.2, 63.6], [170.2, 54.5], [170.2, 59.1],</span></span><br><span class="line"><span class="undefined">                [161.3, 70.5], [167.6, 52.7], [167.6, 62.7], [165.1, 86.3], [162.6, 66.4],</span></span><br><span class="line"><span class="undefined">                [152.4, 67.3], [168.9, 63.0], [170.2, 73.6], [175.2, 62.3], [175.2, 57.7],</span></span><br><span class="line"><span class="undefined">                [160.0, 55.4], [165.1, 104.1], [174.0, 55.5], [170.2, 77.3], [160.0, 80.5],</span></span><br><span class="line"><span class="undefined">                [167.6, 64.5], [167.6, 72.3], [167.6, 61.4], [154.9, 58.2], [162.6, 81.8],</span></span><br><span class="line"><span class="undefined">                [175.3, 63.6], [171.4, 53.4], [157.5, 54.5], [165.1, 53.6], [160.0, 60.0],</span></span><br><span class="line"><span class="undefined">                [174.0, 73.6], [162.6, 61.4], [174.0, 55.5], [162.6, 63.6], [161.3, 60.9],</span></span><br><span class="line"><span class="undefined">                [156.2, 60.0], [149.9, 46.8], [169.5, 57.3], [160.0, 64.1], [175.3, 63.6],</span></span><br><span class="line"><span class="undefined">                [169.5, 67.3], [160.0, 75.5], [172.7, 68.2], [162.6, 61.4], [157.5, 76.8],</span></span><br><span class="line"><span class="undefined">                [176.5, 71.8], [164.4, 55.5], [160.7, 48.6], [174.0, 66.4], [163.8, 67.3]]</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined">        &#125;, &#123;</span></span><br><span class="line"><span class="javascript">            name: <span class="string">'Male'</span>,</span></span><br><span class="line"><span class="javascript">            color: <span class="string">'rgba(119, 152, 191, .5)'</span>,</span></span><br><span class="line"><span class="undefined">            data: [[174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8],</span></span><br><span class="line"><span class="undefined">                [181.5, 74.8], [184.0, 86.4], [184.5, 78.4], [175.0, 62.0], [184.0, 81.6],</span></span><br><span class="line"><span class="undefined">                [180.0, 76.6], [177.8, 83.6], [192.0, 90.0], [176.0, 74.6], [174.0, 71.0],</span></span><br><span class="line"><span class="undefined">                [184.0, 79.6], [192.7, 93.8], [171.5, 70.0], [173.0, 72.4], [176.0, 85.9],</span></span><br><span class="line"><span class="undefined">                [176.0, 78.8], [180.5, 77.8], [172.7, 66.2], [176.0, 86.4], [173.5, 81.8],</span></span><br><span class="line"><span class="undefined">                [178.0, 89.6], [180.3, 82.8], [180.3, 76.4], [164.5, 63.2], [173.0, 60.9],</span></span><br><span class="line"><span class="undefined">                [183.5, 74.8], [175.5, 70.0], [188.0, 72.4], [189.2, 84.1], [172.8, 69.1],</span></span><br><span class="line"><span class="undefined">                [170.0, 59.5], [182.0, 67.2], [170.0, 61.3], [177.8, 68.6], [184.2, 80.1],</span></span><br><span class="line"><span class="undefined">                [186.7, 87.8], [171.4, 84.7], [172.7, 73.4], [175.3, 72.1], [180.3, 82.6],</span></span><br><span class="line"><span class="undefined">                [182.9, 88.7], [188.0, 84.1], [177.2, 94.1], [172.1, 74.9], [167.0, 59.1],</span></span><br><span class="line"><span class="undefined">                [169.5, 75.6], [174.0, 86.2], [172.7, 75.3], [182.2, 87.1], [164.1, 55.2],</span></span><br><span class="line"><span class="undefined">                [163.0, 57.0], [171.5, 61.4], [184.2, 76.8], [174.0, 86.8], [174.0, 72.2],</span></span><br><span class="line"><span class="undefined">                [177.0, 71.6], [186.0, 84.8], [167.0, 68.2], [171.8, 66.1], [182.0, 72.0],</span></span><br><span class="line"><span class="undefined">                [167.0, 64.6], [177.8, 74.8], [164.5, 70.0], [192.0, 101.6], [175.5, 63.2],</span></span><br><span class="line"><span class="undefined">                [171.2, 79.1], [181.6, 78.9], [167.4, 67.7], [181.1, 66.0], [177.0, 68.2],</span></span><br><span class="line"><span class="undefined">                [174.5, 63.9], [177.5, 72.0], [170.5, 56.8], [182.4, 74.5], [197.1, 90.9],</span></span><br><span class="line"><span class="undefined">                [180.1, 93.0], [175.5, 80.9], [180.6, 72.7], [184.4, 68.0], [175.5, 70.9],</span></span><br><span class="line"><span class="undefined">                [180.6, 72.5], [177.0, 72.5], [177.1, 83.4], [181.6, 75.5], [176.5, 73.0],</span></span><br><span class="line"><span class="undefined">                [175.0, 70.2], [174.0, 73.4], [165.1, 70.5], [177.0, 68.9], [192.0, 102.3],</span></span><br><span class="line"><span class="undefined">                [176.5, 68.4], [169.4, 65.9], [182.1, 75.7], [179.8, 84.5], [175.3, 87.7],</span></span><br><span class="line"><span class="undefined">                [184.9, 86.4], [177.3, 73.2], [167.4, 53.9], [178.1, 72.0], [168.9, 55.5],</span></span><br><span class="line"><span class="undefined">                [157.2, 58.4], [180.3, 83.2], [170.2, 72.7], [177.8, 64.1], [172.7, 72.3],</span></span><br><span class="line"><span class="undefined">                [165.1, 65.0], [186.7, 86.4], [165.1, 65.0], [174.0, 88.6], [175.3, 84.1],</span></span><br><span class="line"><span class="undefined">                [185.4, 66.8], [177.8, 75.5], [180.3, 93.2], [180.3, 82.7], [177.8, 58.0],</span></span><br><span class="line"><span class="undefined">                [177.8, 79.5], [177.8, 78.6], [177.8, 71.8], [177.8, 116.4], [163.8, 72.2],</span></span><br><span class="line"><span class="undefined">                [188.0, 83.6], [198.1, 85.5], [175.3, 90.9], [166.4, 85.9], [190.5, 89.1],</span></span><br><span class="line"><span class="undefined">                [166.4, 75.0], [177.8, 77.7], [179.7, 86.4], [172.7, 90.9], [190.5, 73.6],</span></span><br><span class="line"><span class="undefined">                [185.4, 76.4], [168.9, 69.1], [167.6, 84.5], [175.3, 64.5], [170.2, 69.1],</span></span><br><span class="line"><span class="undefined">                [190.5, 108.6], [177.8, 86.4], [190.5, 80.9], [177.8, 87.7], [184.2, 94.5],</span></span><br><span class="line"><span class="undefined">                [176.5, 80.2], [177.8, 72.0], [180.3, 71.4], [171.4, 72.7], [172.7, 84.1],</span></span><br><span class="line"><span class="undefined">                [172.7, 76.8], [177.8, 63.6], [177.8, 80.9], [182.9, 80.9], [170.2, 85.5],</span></span><br><span class="line"><span class="undefined">                [167.6, 68.6], [175.3, 67.7], [165.1, 66.4], [185.4, 102.3], [181.6, 70.5],</span></span><br><span class="line"><span class="undefined">                [172.7, 95.9], [190.5, 84.1], [179.1, 87.3], [175.3, 71.8], [170.2, 65.9],</span></span><br><span class="line"><span class="undefined">                [193.0, 95.9], [171.4, 91.4], [177.8, 81.8], [177.8, 96.8], [167.6, 69.1],</span></span><br><span class="line"><span class="undefined">                [167.6, 82.7], [180.3, 75.5], [182.9, 79.5], [176.5, 73.6], [186.7, 91.8],</span></span><br><span class="line"><span class="undefined">                [188.0, 84.1], [188.0, 85.9], [177.8, 81.8], [174.0, 82.5], [177.8, 80.5],</span></span><br><span class="line"><span class="undefined">                [171.4, 70.0], [185.4, 81.8], [185.4, 84.1], [188.0, 90.5], [188.0, 91.4],</span></span><br><span class="line"><span class="undefined">                [182.9, 89.1], [176.5, 85.0], [175.3, 69.1], [175.3, 73.6], [188.0, 80.5],</span></span><br><span class="line"><span class="undefined">                [188.0, 82.7], [175.3, 86.4], [170.5, 67.7], [179.1, 92.7], [177.8, 93.6],</span></span><br><span class="line"><span class="undefined">                [175.3, 70.9], [182.9, 75.0], [170.8, 93.2], [188.0, 93.2], [180.3, 77.7],</span></span><br><span class="line"><span class="undefined">                [177.8, 61.4], [185.4, 94.1], [168.9, 75.0], [185.4, 83.6], [180.3, 85.5],</span></span><br><span class="line"><span class="undefined">                [174.0, 73.9], [167.6, 66.8], [182.9, 87.3], [160.0, 72.3], [180.3, 88.6],</span></span><br><span class="line"><span class="undefined">                [167.6, 75.5], [186.7, 101.4], [175.3, 91.1], [175.3, 67.3], [175.9, 77.7],</span></span><br><span class="line"><span class="undefined">                [175.3, 81.8], [179.1, 75.5], [181.6, 84.5], [177.8, 76.6], [182.9, 85.0],</span></span><br><span class="line"><span class="undefined">                [177.8, 102.5], [184.2, 77.3], [179.1, 71.8], [176.5, 87.9], [188.0, 94.3],</span></span><br><span class="line"><span class="undefined">                [174.0, 70.9], [167.6, 64.5], [170.2, 77.3], [167.6, 72.3], [188.0, 87.3],</span></span><br><span class="line"><span class="undefined">                [174.0, 80.0], [176.5, 82.3], [180.3, 73.6], [167.6, 74.1], [188.0, 85.9],</span></span><br><span class="line"><span class="undefined">                [180.3, 73.2], [167.6, 76.3], [183.0, 65.9], [183.0, 90.9], [179.1, 89.1],</span></span><br><span class="line"><span class="undefined">                [170.2, 62.3], [177.8, 82.7], [179.1, 79.1], [190.5, 98.2], [177.8, 84.1],</span></span><br><span class="line"><span class="undefined">                [180.3, 83.2], [180.3, 83.2]]      </span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   ];     </span></span><br><span class="line"><span class="undefined">      </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> json = &#123;&#125;;   </span></span><br><span class="line"><span class="undefined">   json.chart = chart; </span></span><br><span class="line"><span class="undefined">   json.title = title;   </span></span><br><span class="line"><span class="undefined">   json.subtitle = subtitle; </span></span><br><span class="line"><span class="undefined">   json.legend = legend;</span></span><br><span class="line"><span class="undefined">   json.xAxis = xAxis;</span></span><br><span class="line"><span class="undefined">   json.yAxis = yAxis;  </span></span><br><span class="line"><span class="undefined">   json.series = series;</span></span><br><span class="line"><span class="undefined">   json.plotOptions = plotOptions;</span></span><br><span class="line"><span class="javascript">   $(<span class="string">'#container'</span>).highcharts(json);</span></span><br><span class="line"><span class="undefined">  </span></span><br><span class="line"><span class="undefined">&#125;);</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="动态图示例"><a href="#动态图示例" class="headerlink" title="动态图示例"></a>动态图示例</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>Highcharts 教程 | 菜鸟教程(runoob.com)<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://code.highcharts.com/highcharts.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"container"</span> <span class="attr">style</span>=<span class="string">"width: 550px; height: 400px; margin: 0 auto"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">language</span>=<span class="string">"JavaScript"</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;  </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> chart = &#123;</span></span><br><span class="line"><span class="javascript">      type: <span class="string">'spline'</span>,</span></span><br><span class="line"><span class="javascript">	  animation: Highcharts.svg, <span class="comment">// don't animate in IE &lt; IE 10.</span></span></span><br><span class="line"><span class="undefined">      marginRight: 10,</span></span><br><span class="line"><span class="undefined">	  events: &#123;</span></span><br><span class="line"><span class="javascript">         load: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">            <span class="comment">// set up the updating of the chart each second</span></span></span><br><span class="line"><span class="javascript">            <span class="keyword">var</span> series = <span class="keyword">this</span>.series[<span class="number">0</span>];</span></span><br><span class="line"><span class="javascript">            setInterval(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">               <span class="keyword">var</span> x = (<span class="keyword">new</span> <span class="built_in">Date</span>()).getTime(), <span class="comment">// current time</span></span></span><br><span class="line"><span class="javascript">               y = <span class="built_in">Math</span>.random();</span></span><br><span class="line"><span class="javascript">               series.addPoint([x, y], <span class="literal">true</span>, <span class="literal">true</span>);</span></span><br><span class="line"><span class="undefined">            &#125;, 1000);</span></span><br><span class="line"><span class="undefined">         &#125;</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> title = &#123;</span></span><br><span class="line"><span class="javascript">      text: <span class="string">'Live random data'</span>   </span></span><br><span class="line"><span class="undefined">   &#125;;   </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> xAxis = &#123;</span></span><br><span class="line"><span class="javascript">      type: <span class="string">'datetime'</span>,</span></span><br><span class="line"><span class="undefined">      tickPixelInterval: 150</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> yAxis = &#123;</span></span><br><span class="line"><span class="undefined">      title: &#123;</span></span><br><span class="line"><span class="javascript">         text: <span class="string">'Value'</span></span></span><br><span class="line"><span class="undefined">      &#125;,</span></span><br><span class="line"><span class="undefined">      plotLines: [&#123;</span></span><br><span class="line"><span class="undefined">         value: 0,</span></span><br><span class="line"><span class="undefined">         width: 1,</span></span><br><span class="line"><span class="javascript">         color: <span class="string">'#808080'</span></span></span><br><span class="line"><span class="undefined">      &#125;]</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> tooltip = &#123;</span></span><br><span class="line"><span class="javascript">      formatter: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">      <span class="keyword">return</span> <span class="string">'&lt;b&gt;'</span> + <span class="keyword">this</span>.series.name + <span class="string">'&lt;/b&gt;&lt;br/&gt;'</span> +</span></span><br><span class="line"><span class="javascript">         Highcharts.dateFormat(<span class="string">'%Y-%m-%d %H:%M:%S'</span>, <span class="keyword">this</span>.x) + <span class="string">'&lt;br/&gt;'</span> +</span></span><br><span class="line"><span class="javascript">         Highcharts.numberFormat(<span class="keyword">this</span>.y, <span class="number">2</span>);</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> plotOptions = &#123;</span></span><br><span class="line"><span class="undefined">      area: &#123;</span></span><br><span class="line"><span class="undefined">         pointStart: 1940,</span></span><br><span class="line"><span class="undefined">         marker: &#123;</span></span><br><span class="line"><span class="javascript">            enabled: <span class="literal">false</span>,</span></span><br><span class="line"><span class="javascript">            symbol: <span class="string">'circle'</span>,</span></span><br><span class="line"><span class="undefined">            radius: 2,</span></span><br><span class="line"><span class="undefined">            states: &#123;</span></span><br><span class="line"><span class="undefined">               hover: &#123;</span></span><br><span class="line"><span class="javascript">                 enabled: <span class="literal">true</span></span></span><br><span class="line"><span class="undefined">               &#125;</span></span><br><span class="line"><span class="undefined">            &#125;</span></span><br><span class="line"><span class="undefined">         &#125;</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> legend = &#123;</span></span><br><span class="line"><span class="javascript">      enabled: <span class="literal">false</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> exporting = &#123;</span></span><br><span class="line"><span class="javascript">      enabled: <span class="literal">false</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> series= [&#123;</span></span><br><span class="line"><span class="javascript">      name: <span class="string">'Random data'</span>,</span></span><br><span class="line"><span class="javascript">      data: (<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">         <span class="comment">// generate an array of random data</span></span></span><br><span class="line"><span class="javascript">         <span class="keyword">var</span> data = [],time = (<span class="keyword">new</span> <span class="built_in">Date</span>()).getTime(),i;</span></span><br><span class="line"><span class="javascript">         <span class="keyword">for</span> (i = <span class="number">-19</span>; i &lt;= <span class="number">0</span>; i += <span class="number">1</span>) &#123;</span></span><br><span class="line"><span class="undefined">            data.push(&#123;</span></span><br><span class="line"><span class="undefined">               x: time + i * 1000,</span></span><br><span class="line"><span class="javascript">               y: <span class="built_in">Math</span>.random()</span></span><br><span class="line"><span class="undefined">            &#125;);</span></span><br><span class="line"><span class="undefined">         &#125;</span></span><br><span class="line"><span class="javascript">         <span class="keyword">return</span> data;</span></span><br><span class="line"><span class="undefined">      &#125;())    </span></span><br><span class="line"><span class="undefined">   &#125;];     </span></span><br><span class="line"><span class="undefined">      </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> json = &#123;&#125;;   </span></span><br><span class="line"><span class="undefined">   json.chart = chart; </span></span><br><span class="line"><span class="undefined">   json.title = title;     </span></span><br><span class="line"><span class="undefined">   json.tooltip = tooltip;</span></span><br><span class="line"><span class="undefined">   json.xAxis = xAxis;</span></span><br><span class="line"><span class="undefined">   json.yAxis = yAxis; </span></span><br><span class="line"><span class="undefined">   json.legend = legend;  </span></span><br><span class="line"><span class="undefined">   json.exporting = exporting;   </span></span><br><span class="line"><span class="undefined">   json.series = series;</span></span><br><span class="line"><span class="undefined">   json.plotOptions = plotOptions;</span></span><br><span class="line"><span class="undefined">   </span></span><br><span class="line"><span class="undefined">   </span></span><br><span class="line"><span class="undefined">   Highcharts.setOptions(&#123;</span></span><br><span class="line"><span class="undefined">      global: &#123;</span></span><br><span class="line"><span class="javascript">         useUTC: <span class="literal">false</span></span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   &#125;);</span></span><br><span class="line"><span class="javascript">   $(<span class="string">'#container'</span>).highcharts(json);</span></span><br><span class="line"><span class="undefined">  </span></span><br><span class="line"><span class="undefined">&#125;);</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="组合图示例"><a href="#组合图示例" class="headerlink" title="组合图示例"></a>组合图示例</h3><p>示例1 柱形图，线条图，饼图组合</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>Highcharts 教程 | 菜鸟教程(runoob.com)<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://code.highcharts.com/highcharts.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"container"</span> <span class="attr">style</span>=<span class="string">"width: 550px; height: 400px; margin: 0 auto"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">language</span>=<span class="string">"JavaScript"</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;  </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> title = &#123;</span></span><br><span class="line"><span class="javascript">      text: <span class="string">'Combination chart'</span>   </span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> xAxis = &#123;</span></span><br><span class="line"><span class="javascript">      categories: [<span class="string">'Apples'</span>, <span class="string">'Oranges'</span>, <span class="string">'Pears'</span>, <span class="string">'Bananas'</span>, <span class="string">'Plums'</span>]</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> labels = &#123;</span></span><br><span class="line"><span class="undefined">      items: [&#123;</span></span><br><span class="line"><span class="javascript">         html: <span class="string">'水果消费'</span>,</span></span><br><span class="line"><span class="undefined">            style: &#123;</span></span><br><span class="line"><span class="javascript">               left: <span class="string">'50px'</span>,</span></span><br><span class="line"><span class="javascript">               top: <span class="string">'18px'</span>,</span></span><br><span class="line"><span class="javascript">               color: (Highcharts.theme &amp;&amp; Highcharts.theme.textColor) || <span class="string">'black'</span></span></span><br><span class="line"><span class="undefined">            &#125;</span></span><br><span class="line"><span class="undefined">      &#125;]</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> series= [&#123;</span></span><br><span class="line"><span class="javascript">        type: <span class="string">'column'</span>,</span></span><br><span class="line"><span class="javascript">            name: <span class="string">'Jane'</span>,</span></span><br><span class="line"><span class="undefined">            data: [3, 2, 1, 3, 4]</span></span><br><span class="line"><span class="undefined">        &#125;, &#123;</span></span><br><span class="line"><span class="javascript">            type: <span class="string">'column'</span>,</span></span><br><span class="line"><span class="javascript">            name: <span class="string">'John'</span>,</span></span><br><span class="line"><span class="undefined">            data: [2, 3, 5, 7, 6]</span></span><br><span class="line"><span class="undefined">        &#125;, &#123;</span></span><br><span class="line"><span class="javascript">            type: <span class="string">'column'</span>,</span></span><br><span class="line"><span class="javascript">            name: <span class="string">'Joe'</span>,</span></span><br><span class="line"><span class="undefined">            data: [4, 3, 3, 9, 0]</span></span><br><span class="line"><span class="undefined">        &#125;, &#123;</span></span><br><span class="line"><span class="javascript">            type: <span class="string">'spline'</span>,</span></span><br><span class="line"><span class="javascript">            name: <span class="string">'Average'</span>,</span></span><br><span class="line"><span class="undefined">            data: [3, 2.67, 3, 6.33, 3.33],</span></span><br><span class="line"><span class="undefined">            marker: &#123;</span></span><br><span class="line"><span class="undefined">                lineWidth: 2,</span></span><br><span class="line"><span class="undefined">                lineColor: Highcharts.getOptions().colors[3],</span></span><br><span class="line"><span class="javascript">                fillColor: <span class="string">'white'</span></span></span><br><span class="line"><span class="undefined">            &#125;</span></span><br><span class="line"><span class="undefined">        &#125;, &#123;</span></span><br><span class="line"><span class="javascript">            type: <span class="string">'pie'</span>,</span></span><br><span class="line"><span class="javascript">            name: <span class="string">'总消费'</span>,</span></span><br><span class="line"><span class="undefined">            data: [&#123;</span></span><br><span class="line"><span class="javascript">                name: <span class="string">'Jane'</span>,</span></span><br><span class="line"><span class="undefined">                y: 13,</span></span><br><span class="line"><span class="javascript">                color: Highcharts.getOptions().colors[<span class="number">0</span>] <span class="comment">// Jane 的颜色</span></span></span><br><span class="line"><span class="undefined">            &#125;, &#123;</span></span><br><span class="line"><span class="javascript">                name: <span class="string">'John'</span>,</span></span><br><span class="line"><span class="undefined">                y: 23,</span></span><br><span class="line"><span class="javascript">                color: Highcharts.getOptions().colors[<span class="number">1</span>] <span class="comment">// John 的颜色</span></span></span><br><span class="line"><span class="undefined">            &#125;, &#123;</span></span><br><span class="line"><span class="javascript">                name: <span class="string">'Joe'</span>,</span></span><br><span class="line"><span class="undefined">                y: 19,</span></span><br><span class="line"><span class="javascript">                color: Highcharts.getOptions().colors[<span class="number">2</span>] <span class="comment">// Joe 的颜色</span></span></span><br><span class="line"><span class="undefined">            &#125;],</span></span><br><span class="line"><span class="undefined">            center: [100, 80],</span></span><br><span class="line"><span class="undefined">            size: 100,</span></span><br><span class="line"><span class="javascript">            showInLegend: <span class="literal">false</span>,</span></span><br><span class="line"><span class="undefined">            dataLabels: &#123;</span></span><br><span class="line"><span class="javascript">                enabled: <span class="literal">false</span></span></span><br><span class="line"><span class="undefined">            &#125;</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   ];     </span></span><br><span class="line"><span class="undefined">      </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> json = &#123;&#125;;   </span></span><br><span class="line"><span class="undefined">   json.title = title;   </span></span><br><span class="line"><span class="undefined">   json.xAxis = xAxis;</span></span><br><span class="line"><span class="undefined">   json.labels = labels;  </span></span><br><span class="line"><span class="undefined">   json.series = series;</span></span><br><span class="line"><span class="javascript">   $(<span class="string">'#container'</span>).highcharts(json);  </span></span><br><span class="line"><span class="undefined">&#125;);</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>示例2散点图上添加回归线</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>Highcharts 教程 | 菜鸟教程(runoob.com)<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://code.highcharts.com/highcharts.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"container"</span> <span class="attr">style</span>=<span class="string">"width: 550px; height: 400px; margin: 0 auto"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">language</span>=<span class="string">"JavaScript"</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;  </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> title = &#123;</span></span><br><span class="line"><span class="javascript">      text: <span class="string">'散点图上添加回归线'</span>   </span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> xAxis = &#123;</span></span><br><span class="line"><span class="undefined">      min: -0.5,</span></span><br><span class="line"><span class="undefined">      max: 5.5</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> yAxis= &#123;</span></span><br><span class="line"><span class="undefined">      min: 0</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> series= [&#123;</span></span><br><span class="line"><span class="javascript">            type: <span class="string">'line'</span>,</span></span><br><span class="line"><span class="javascript">            name: <span class="string">'回归线'</span>,</span></span><br><span class="line"><span class="undefined">            data: [[0, 1.11], [5, 4.51]],</span></span><br><span class="line"><span class="undefined">            marker: &#123;</span></span><br><span class="line"><span class="javascript">                enabled: <span class="literal">false</span></span></span><br><span class="line"><span class="undefined">            &#125;,</span></span><br><span class="line"><span class="undefined">            states: &#123;</span></span><br><span class="line"><span class="undefined">                hover: &#123;</span></span><br><span class="line"><span class="undefined">                    lineWidth: 0</span></span><br><span class="line"><span class="undefined">                &#125;</span></span><br><span class="line"><span class="undefined">            &#125;,</span></span><br><span class="line"><span class="javascript">            enableMouseTracking: <span class="literal">false</span></span></span><br><span class="line"><span class="undefined">        &#125;, &#123;</span></span><br><span class="line"><span class="javascript">            type: <span class="string">'scatter'</span>,</span></span><br><span class="line"><span class="javascript">            name: <span class="string">'观察点'</span>,</span></span><br><span class="line"><span class="undefined">            data: [1, 1.5, 2.8, 3.5, 3.9, 4.2],</span></span><br><span class="line"><span class="undefined">            marker: &#123;</span></span><br><span class="line"><span class="undefined">                radius: 4</span></span><br><span class="line"><span class="undefined">            &#125;</span></span><br><span class="line"><span class="undefined">        &#125;</span></span><br><span class="line"><span class="undefined">   ];     </span></span><br><span class="line"><span class="undefined">      </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> json = &#123;&#125;;   </span></span><br><span class="line"><span class="undefined">   json.title = title;</span></span><br><span class="line"><span class="undefined">   json.xAxis = xAxis;</span></span><br><span class="line"><span class="undefined">   json.yAxis = yAxis;</span></span><br><span class="line"><span class="undefined">   json.series = series;</span></span><br><span class="line"><span class="javascript">   $(<span class="string">'#container'</span>).highcharts(json);  </span></span><br><span class="line"><span class="undefined">&#125;);</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="3D图示例"><a href="#3D图示例" class="headerlink" title="3D图示例"></a>3D图示例</h3><p>示例1 3D柱形图</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>Highcharts 教程 | 菜鸟教程(runoob.com)<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://code.highcharts.com/highcharts.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://code.highcharts.com/highcharts-3d.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"container"</span> <span class="attr">style</span>=<span class="string">"width: 550px; height: 400px; margin: 0 auto"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"sliders"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">table</span>&gt;</span></span><br><span class="line">   <span class="tag">&lt;<span class="name">tr</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span>Alpha Angle<span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">input</span> <span class="attr">id</span>=<span class="string">"R0"</span> <span class="attr">type</span>=<span class="string">"range"</span> <span class="attr">min</span>=<span class="string">"0"</span> <span class="attr">max</span>=<span class="string">"45"</span> <span class="attr">value</span>=<span class="string">"15"</span>/&gt;</span> <span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">"R0-value"</span> <span class="attr">class</span>=<span class="string">"value"</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">   <span class="tag">&lt;<span class="name">tr</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span>Beta Angle<span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;<span class="name">input</span> <span class="attr">id</span>=<span class="string">"R1"</span> <span class="attr">type</span>=<span class="string">"range"</span> <span class="attr">min</span>=<span class="string">"0"</span> <span class="attr">max</span>=<span class="string">"45"</span> <span class="attr">value</span>=<span class="string">"15"</span>/&gt;</span> <span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">"R1-value"</span> <span class="attr">class</span>=<span class="string">"value"</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">table</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">language</span>=<span class="string">"JavaScript"</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;  </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> chart = &#123;</span></span><br><span class="line"><span class="javascript">      renderTo: <span class="string">'container'</span>,</span></span><br><span class="line"><span class="javascript">      type: <span class="string">'column'</span>,</span></span><br><span class="line"><span class="undefined">      margin: 75,</span></span><br><span class="line"><span class="undefined">      options3d: &#123;</span></span><br><span class="line"><span class="javascript">         enabled: <span class="literal">true</span>,</span></span><br><span class="line"><span class="undefined">         alpha: 15,</span></span><br><span class="line"><span class="undefined">         beta: 15,</span></span><br><span class="line"><span class="undefined">         depth: 50,</span></span><br><span class="line"><span class="undefined">         viewDistance: 25</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> title = &#123;</span></span><br><span class="line"><span class="javascript">      text: <span class="string">'图表旋转实例'</span>   </span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> subtitle = &#123;</span></span><br><span class="line"><span class="javascript">      text: <span class="string">'通过拖动下面的滑块测试'</span>  </span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="undefined">   </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> plotOptions = &#123;</span></span><br><span class="line"><span class="undefined">      column: &#123;</span></span><br><span class="line"><span class="undefined">         depth: 25</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> series= [&#123;</span></span><br><span class="line"><span class="undefined">      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]</span></span><br><span class="line"><span class="undefined">   &#125;];     </span></span><br><span class="line"><span class="undefined">      </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> json = &#123;&#125;;   </span></span><br><span class="line"><span class="undefined">   json.chart = chart; </span></span><br><span class="line"><span class="undefined">   json.title = title;   </span></span><br><span class="line"><span class="undefined">   json.subtitle = subtitle;    </span></span><br><span class="line"><span class="undefined">   json.series = series;</span></span><br><span class="line"><span class="undefined">   json.plotOptions = plotOptions;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> highchart = <span class="keyword">new</span> Highcharts.Chart(json);</span></span><br><span class="line"><span class="undefined">  </span></span><br><span class="line"><span class="javascript">   <span class="function"><span class="keyword">function</span> <span class="title">showValues</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">      $(<span class="string">'#R0-value'</span>).html(highchart.options.chart.options3d.alpha);</span></span><br><span class="line"><span class="javascript">      $(<span class="string">'#R1-value'</span>).html(highchart.options.chart.options3d.beta);</span></span><br><span class="line"><span class="undefined">   &#125;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">   <span class="comment">// Activate the sliders</span></span></span><br><span class="line"><span class="javascript">   $(<span class="string">'#R0'</span>).on(<span class="string">'change'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">      highchart.options.chart.options3d.alpha = <span class="keyword">this</span>.value;</span></span><br><span class="line"><span class="undefined">      showValues();</span></span><br><span class="line"><span class="javascript">      highchart.redraw(<span class="literal">false</span>);</span></span><br><span class="line"><span class="undefined">   &#125;);</span></span><br><span class="line"><span class="javascript">   $(<span class="string">'#R1'</span>).on(<span class="string">'change'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">      highchart.options.chart.options3d.beta = <span class="keyword">this</span>.value;</span></span><br><span class="line"><span class="undefined">      showValues();</span></span><br><span class="line"><span class="javascript">      highchart.redraw(<span class="literal">false</span>);</span></span><br><span class="line"><span class="undefined">   &#125;);</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined">   showValues();</span></span><br><span class="line"><span class="undefined">&#125;);</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="测量图示例"><a href="#测量图示例" class="headerlink" title="测量图示例"></a>测量图示例</h3><p>示例1车速表</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>Highcharts 教程 | 菜鸟教程(runoob.com)<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://code.highcharts.com/highcharts.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://code.highcharts.com/highcharts-more.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span>  </span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"container"</span> <span class="attr">style</span>=<span class="string">"width: 550px; height: 400px; margin: 0 auto"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">language</span>=<span class="string">"JavaScript"</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;  </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> chart = &#123;      </span></span><br><span class="line"><span class="javascript">      type: <span class="string">'gauge'</span>,</span></span><br><span class="line"><span class="javascript">      plotBackgroundColor: <span class="literal">null</span>,</span></span><br><span class="line"><span class="javascript">      plotBackgroundImage: <span class="literal">null</span>,</span></span><br><span class="line"><span class="undefined">      plotBorderWidth: 0,</span></span><br><span class="line"><span class="javascript">      plotShadow: <span class="literal">false</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> title = &#123;</span></span><br><span class="line"><span class="javascript">      text: <span class="string">'车速表'</span>   </span></span><br><span class="line"><span class="undefined">   &#125;;     </span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> pane = &#123;</span></span><br><span class="line"><span class="undefined">      startAngle: -150,</span></span><br><span class="line"><span class="undefined">      endAngle: 150,</span></span><br><span class="line"><span class="undefined">      background: [&#123;</span></span><br><span class="line"><span class="undefined">         backgroundColor: &#123;</span></span><br><span class="line"><span class="undefined">            linearGradient: &#123; x1: 0, y1: 0, x2: 0, y2: 1 &#125;,</span></span><br><span class="line"><span class="undefined">            stops: [</span></span><br><span class="line"><span class="javascript">               [<span class="number">0</span>, <span class="string">'#FFF'</span>],</span></span><br><span class="line"><span class="javascript">               [<span class="number">1</span>, <span class="string">'#333'</span>]</span></span><br><span class="line"><span class="undefined">            ]</span></span><br><span class="line"><span class="undefined">         &#125;,</span></span><br><span class="line"><span class="undefined">         borderWidth: 0,</span></span><br><span class="line"><span class="javascript">         outerRadius: <span class="string">'109%'</span></span></span><br><span class="line"><span class="undefined">      &#125;, &#123;</span></span><br><span class="line"><span class="undefined">         backgroundColor: &#123;</span></span><br><span class="line"><span class="undefined">            linearGradient: &#123; x1: 0, y1: 0, x2: 0, y2: 1 &#125;,</span></span><br><span class="line"><span class="undefined">            stops: [</span></span><br><span class="line"><span class="javascript">               [<span class="number">0</span>, <span class="string">'#333'</span>],</span></span><br><span class="line"><span class="javascript">               [<span class="number">1</span>, <span class="string">'#FFF'</span>]</span></span><br><span class="line"><span class="undefined">            ]</span></span><br><span class="line"><span class="undefined">         &#125;,</span></span><br><span class="line"><span class="undefined">         borderWidth: 1,</span></span><br><span class="line"><span class="javascript">         outerRadius: <span class="string">'107%'</span></span></span><br><span class="line"><span class="undefined">     &#125;, &#123;</span></span><br><span class="line"><span class="javascript">         <span class="comment">// default background</span></span></span><br><span class="line"><span class="undefined">     &#125;, &#123;</span></span><br><span class="line"><span class="javascript">         backgroundColor: <span class="string">'#DDD'</span>,</span></span><br><span class="line"><span class="undefined">         borderWidth: 0,</span></span><br><span class="line"><span class="javascript">         outerRadius: <span class="string">'105%'</span>,</span></span><br><span class="line"><span class="javascript">         innerRadius: <span class="string">'103%'</span></span></span><br><span class="line"><span class="undefined">     &#125;]</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">   <span class="comment">// the value axis</span></span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> yAxis = &#123;</span></span><br><span class="line"><span class="undefined">      min: 0,</span></span><br><span class="line"><span class="undefined">      max: 200,</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">      minorTickInterval: <span class="string">'auto'</span>,</span></span><br><span class="line"><span class="undefined">      minorTickWidth: 1,</span></span><br><span class="line"><span class="undefined">      minorTickLength: 10,</span></span><br><span class="line"><span class="javascript">      minorTickPosition: <span class="string">'inside'</span>,</span></span><br><span class="line"><span class="javascript">      minorTickColor: <span class="string">'#666'</span>,</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined">      tickPixelInterval: 30,</span></span><br><span class="line"><span class="undefined">      tickWidth: 2,</span></span><br><span class="line"><span class="javascript">      tickPosition: <span class="string">'inside'</span>,</span></span><br><span class="line"><span class="undefined">      tickLength: 10,</span></span><br><span class="line"><span class="javascript">      tickColor: <span class="string">'#666'</span>,</span></span><br><span class="line"><span class="undefined">      labels: &#123;</span></span><br><span class="line"><span class="undefined">         step: 2,</span></span><br><span class="line"><span class="javascript">         rotation: <span class="string">'auto'</span></span></span><br><span class="line"><span class="undefined">      &#125;,</span></span><br><span class="line"><span class="undefined">      title: &#123;</span></span><br><span class="line"><span class="javascript">         text: <span class="string">'km/h'</span></span></span><br><span class="line"><span class="undefined">      &#125;,</span></span><br><span class="line"><span class="undefined">      plotBands: [&#123;</span></span><br><span class="line"><span class="javascript">         <span class="keyword">from</span>: <span class="number">0</span>,</span></span><br><span class="line"><span class="undefined">         to: 120,</span></span><br><span class="line"><span class="javascript">         color: <span class="string">'#55BF3B'</span> <span class="comment">// green</span></span></span><br><span class="line"><span class="undefined">      &#125;, &#123;</span></span><br><span class="line"><span class="javascript">         <span class="keyword">from</span>: <span class="number">120</span>,</span></span><br><span class="line"><span class="undefined">         to: 160,</span></span><br><span class="line"><span class="javascript">         color: <span class="string">'#DDDF0D'</span> <span class="comment">// yellow</span></span></span><br><span class="line"><span class="undefined">      &#125;, &#123;</span></span><br><span class="line"><span class="javascript">         <span class="keyword">from</span>: <span class="number">160</span>,</span></span><br><span class="line"><span class="undefined">         to: 200,</span></span><br><span class="line"><span class="javascript">         color: <span class="string">'#DF5353'</span> <span class="comment">// red</span></span></span><br><span class="line"><span class="undefined">      &#125;]</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> series= [&#123;</span></span><br><span class="line"><span class="javascript">        name: <span class="string">'Speed'</span>,</span></span><br><span class="line"><span class="undefined">        data: [80],</span></span><br><span class="line"><span class="undefined">        tooltip: &#123;</span></span><br><span class="line"><span class="javascript">           valueSuffix: <span class="string">' km/h'</span></span></span><br><span class="line"><span class="undefined">        &#125;</span></span><br><span class="line"><span class="undefined">   &#125;];     </span></span><br><span class="line"><span class="undefined">      </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> json = &#123;&#125;;   </span></span><br><span class="line"><span class="undefined">   json.chart = chart; </span></span><br><span class="line"><span class="undefined">   json.title = title;       </span></span><br><span class="line"><span class="undefined">   json.pane = pane; </span></span><br><span class="line"><span class="undefined">   json.yAxis = yAxis; </span></span><br><span class="line"><span class="undefined">   json.series = series;     </span></span><br><span class="line"><span class="undefined">   </span></span><br><span class="line"><span class="javascript">   <span class="comment">// Add some life</span></span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> chartFunction = <span class="function"><span class="keyword">function</span> (<span class="params">chart</span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">      <span class="keyword">if</span> (!chart.renderer.forExport) &#123;</span></span><br><span class="line"><span class="javascript">         setInterval(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">         <span class="keyword">var</span> point = chart.series[<span class="number">0</span>].points[<span class="number">0</span>], newVal, inc = <span class="built_in">Math</span>.round((<span class="built_in">Math</span>.random() - <span class="number">0.5</span>) * <span class="number">20</span>);</span></span><br><span class="line"><span class="undefined">         newVal = point.y + inc;</span></span><br><span class="line"><span class="javascript">         <span class="keyword">if</span> (newVal &lt; <span class="number">0</span> || newVal &gt; <span class="number">200</span>) &#123;</span></span><br><span class="line"><span class="undefined">            newVal = point.y - inc;</span></span><br><span class="line"><span class="undefined">         &#125;</span></span><br><span class="line"><span class="undefined">         point.update(newVal);</span></span><br><span class="line"><span class="undefined">         &#125;, 3000);</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="undefined">   </span></span><br><span class="line"><span class="javascript">   $(<span class="string">'#container'</span>).highcharts(json,chartFunction);</span></span><br><span class="line"><span class="undefined">&#125;);</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>示例2图形进度式测量</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>Highcharts 教程 | 菜鸟教程(runoob.com)<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://code.highcharts.com/highcharts.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://code.highcharts.com/highcharts-more.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span>  </span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://code.highcharts.com/modules/solid-gauge.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">"width: 600px; height: 400px; margin: 0 auto"</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"container-speed"</span> <span class="attr">style</span>=<span class="string">"width: 300px; height: 200px; float: left"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"container-rpm"</span> <span class="attr">style</span>=<span class="string">"width: 300px; height: 200px; float: left"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">language</span>=<span class="string">"JavaScript"</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;  </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> chart = &#123;      </span></span><br><span class="line"><span class="javascript">      type: <span class="string">'solidgauge'</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> title = <span class="literal">null</span>;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> pane = &#123;</span></span><br><span class="line"><span class="javascript">      center: [<span class="string">'50%'</span>, <span class="string">'85%'</span>],</span></span><br><span class="line"><span class="javascript">      size: <span class="string">'140%'</span>,</span></span><br><span class="line"><span class="undefined">      startAngle: -90,</span></span><br><span class="line"><span class="undefined">      endAngle: 90,</span></span><br><span class="line"><span class="undefined">      background: &#123;</span></span><br><span class="line"><span class="javascript">         backgroundColor: (Highcharts.theme &amp;&amp; Highcharts.theme.background2) || <span class="string">'#EEE'</span>,</span></span><br><span class="line"><span class="javascript">         innerRadius: <span class="string">'60%'</span>,</span></span><br><span class="line"><span class="javascript">         outerRadius: <span class="string">'100%'</span>,</span></span><br><span class="line"><span class="javascript">         shape: <span class="string">'arc'</span></span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> tooltip = &#123;</span></span><br><span class="line"><span class="javascript">      enabled: <span class="literal">false</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="undefined">      </span></span><br><span class="line"><span class="javascript">   <span class="comment">// the value axis</span></span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> yAxis = &#123;</span></span><br><span class="line"><span class="undefined">      stops: [</span></span><br><span class="line"><span class="javascript">         [<span class="number">0.1</span>, <span class="string">'#55BF3B'</span>], <span class="comment">// green</span></span></span><br><span class="line"><span class="javascript">         [<span class="number">0.5</span>, <span class="string">'#DDDF0D'</span>], <span class="comment">// yellow</span></span></span><br><span class="line"><span class="javascript">         [<span class="number">0.9</span>, <span class="string">'#DF5353'</span>] <span class="comment">// red</span></span></span><br><span class="line"><span class="undefined">      ],</span></span><br><span class="line"><span class="undefined">      lineWidth: 0,</span></span><br><span class="line"><span class="javascript">      minorTickInterval: <span class="literal">null</span>,</span></span><br><span class="line"><span class="undefined">      tickPixelInterval: 400,</span></span><br><span class="line"><span class="undefined">      tickWidth: 0,</span></span><br><span class="line"><span class="undefined">      title: &#123;</span></span><br><span class="line"><span class="undefined">         y: -70</span></span><br><span class="line"><span class="undefined">      &#125;,</span></span><br><span class="line"><span class="undefined">      labels: &#123;</span></span><br><span class="line"><span class="undefined">         y: 16</span></span><br><span class="line"><span class="undefined">      &#125;,</span></span><br><span class="line"><span class="undefined">	  min: 0,</span></span><br><span class="line"><span class="undefined">      max: 200,</span></span><br><span class="line"><span class="undefined">      title: &#123;</span></span><br><span class="line"><span class="javascript">         text: <span class="string">'Speed'</span></span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   &#125;;	  </span></span><br><span class="line"><span class="undefined">   </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> plotOptions = &#123;</span></span><br><span class="line"><span class="undefined">      solidgauge: &#123;</span></span><br><span class="line"><span class="undefined">         dataLabels: &#123;</span></span><br><span class="line"><span class="undefined">            y: 5,</span></span><br><span class="line"><span class="undefined">            borderWidth: 0,</span></span><br><span class="line"><span class="javascript">            useHTML: <span class="literal">true</span></span></span><br><span class="line"><span class="undefined">         &#125;</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="undefined">   </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> credits = &#123;</span></span><br><span class="line"><span class="javascript">      enabled: <span class="literal">false</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> series = [&#123;</span></span><br><span class="line"><span class="javascript">      name: <span class="string">'Speed'</span>,</span></span><br><span class="line"><span class="undefined">      data: [80],</span></span><br><span class="line"><span class="undefined">      dataLabels: &#123;</span></span><br><span class="line"><span class="xml">         format: '<span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">"text-align:center"</span>&gt;</span><span class="tag">&lt;<span class="name">span</span> <span class="attr">style</span>=<span class="string">"font-size:25px;color:' +</span></span></span></span><br><span class="line"><span class="javascript">         ((Highcharts.theme &amp;&amp; Highcharts.theme.contrastTextColor) || <span class="string">'black'</span>) + <span class="string">'"&gt;&#123;y&#125;&lt;/span&gt;&lt;br/&gt;'</span> +</span></span><br><span class="line"><span class="xml">         '<span class="tag">&lt;<span class="name">span</span> <span class="attr">style</span>=<span class="string">"font-size:12px;color:silver"</span>&gt;</span>km/h<span class="tag">&lt;/<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span>'</span></span><br><span class="line"><span class="undefined">      &#125;,</span></span><br><span class="line"><span class="undefined">      tooltip: &#123;</span></span><br><span class="line"><span class="javascript">         valueSuffix: <span class="string">' km/h'</span></span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   &#125;];</span></span><br><span class="line"><span class="undefined">	  </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> json = &#123;&#125;;   </span></span><br><span class="line"><span class="undefined">   json.chart = chart; </span></span><br><span class="line"><span class="undefined">   json.title = title;       </span></span><br><span class="line"><span class="undefined">   json.pane = pane; </span></span><br><span class="line"><span class="undefined">   json.tooltip = tooltip; </span></span><br><span class="line"><span class="undefined">   json.yAxis = yAxis; </span></span><br><span class="line"><span class="undefined">   json.credits = credits; </span></span><br><span class="line"><span class="undefined">   json.series = series;     </span></span><br><span class="line"><span class="javascript">   $(<span class="string">'#container-speed'</span>).highcharts(json);   </span></span><br><span class="line"><span class="undefined">   </span></span><br><span class="line"><span class="undefined">   </span></span><br><span class="line"><span class="javascript">   <span class="comment">// the value axis</span></span></span><br><span class="line"><span class="undefined">   yAxis = &#123;</span></span><br><span class="line"><span class="undefined">      stops: [</span></span><br><span class="line"><span class="javascript">         [<span class="number">0.1</span>, <span class="string">'#55BF3B'</span>], <span class="comment">// green</span></span></span><br><span class="line"><span class="javascript">         [<span class="number">0.5</span>, <span class="string">'#DDDF0D'</span>], <span class="comment">// yellow</span></span></span><br><span class="line"><span class="javascript">         [<span class="number">0.9</span>, <span class="string">'#DF5353'</span>] <span class="comment">// red</span></span></span><br><span class="line"><span class="undefined">      ],</span></span><br><span class="line"><span class="undefined">      lineWidth: 0,</span></span><br><span class="line"><span class="javascript">      minorTickInterval: <span class="literal">null</span>,</span></span><br><span class="line"><span class="undefined">      tickPixelInterval: 400,</span></span><br><span class="line"><span class="undefined">      tickWidth: 0,</span></span><br><span class="line"><span class="undefined">      title: &#123;</span></span><br><span class="line"><span class="undefined">         y: -70</span></span><br><span class="line"><span class="undefined">      &#125;,</span></span><br><span class="line"><span class="undefined">      labels: &#123;</span></span><br><span class="line"><span class="undefined">         y: 16</span></span><br><span class="line"><span class="undefined">      &#125;,</span></span><br><span class="line"><span class="undefined">	  min: 0,</span></span><br><span class="line"><span class="undefined">      max: 5,</span></span><br><span class="line"><span class="undefined">      title: &#123;</span></span><br><span class="line"><span class="javascript">         text: <span class="string">'RPM'</span></span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   &#125;;	  </span></span><br><span class="line"><span class="undefined">   </span></span><br><span class="line"><span class="undefined">   series = [&#123;</span></span><br><span class="line"><span class="javascript">      name: <span class="string">'RPM'</span>,</span></span><br><span class="line"><span class="undefined">      data: [1],</span></span><br><span class="line"><span class="undefined">      dataLabels: &#123;</span></span><br><span class="line"><span class="xml">         format: '<span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">"text-align:center"</span>&gt;</span><span class="tag">&lt;<span class="name">span</span> <span class="attr">style</span>=<span class="string">"font-size:25px;color:' +</span></span></span></span><br><span class="line"><span class="javascript">         ((Highcharts.theme &amp;&amp; Highcharts.theme.contrastTextColor) || <span class="string">'black'</span>) + <span class="string">'"&gt;&#123;y:.1f&#125;&lt;/span&gt;&lt;br/&gt;'</span> +</span></span><br><span class="line"><span class="xml">         '<span class="tag">&lt;<span class="name">span</span> <span class="attr">style</span>=<span class="string">"font-size:12px;color:silver"</span>&gt;</span>* 1000 / min<span class="tag">&lt;/<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span>'</span></span><br><span class="line"><span class="undefined">      &#125;,</span></span><br><span class="line"><span class="undefined">      tooltip: &#123;</span></span><br><span class="line"><span class="javascript">         valueSuffix: <span class="string">' revolutions/min'</span></span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   &#125;];</span></span><br><span class="line"><span class="undefined">   </span></span><br><span class="line"><span class="undefined">   json.yAxis = yAxis;   </span></span><br><span class="line"><span class="undefined">   json.series = series;     </span></span><br><span class="line"><span class="javascript">   $(<span class="string">'#container-rpm'</span>).highcharts(json);  </span></span><br><span class="line"><span class="undefined">   </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> chartFunction = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">      <span class="comment">// Speed</span></span></span><br><span class="line"><span class="javascript">      <span class="keyword">var</span> chart = $(<span class="string">'#container-speed'</span>).highcharts();</span></span><br><span class="line"><span class="javascript">      <span class="keyword">var</span> point;</span></span><br><span class="line"><span class="javascript">      <span class="keyword">var</span> newVal;</span></span><br><span class="line"><span class="javascript">      <span class="keyword">var</span> inc;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">      <span class="keyword">if</span> (chart) &#123;</span></span><br><span class="line"><span class="undefined">         point = chart.series[0].points[0];</span></span><br><span class="line"><span class="javascript">         inc = <span class="built_in">Math</span>.round((<span class="built_in">Math</span>.random() - <span class="number">0.5</span>) * <span class="number">100</span>);</span></span><br><span class="line"><span class="undefined">         newVal = point.y + inc;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">         <span class="keyword">if</span> (newVal &lt; <span class="number">0</span> || newVal &gt; <span class="number">200</span>) &#123;</span></span><br><span class="line"><span class="undefined">            newVal = point.y - inc;</span></span><br><span class="line"><span class="undefined">         &#125;</span></span><br><span class="line"><span class="undefined">         point.update(newVal);</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">      <span class="comment">// RPM</span></span></span><br><span class="line"><span class="javascript">      chart = $(<span class="string">'#container-rpm'</span>).highcharts();</span></span><br><span class="line"><span class="javascript">      <span class="keyword">if</span> (chart) &#123;</span></span><br><span class="line"><span class="undefined">         point = chart.series[0].points[0];</span></span><br><span class="line"><span class="javascript">         inc = <span class="built_in">Math</span>.random() - <span class="number">0.5</span>;</span></span><br><span class="line"><span class="undefined">         newVal = point.y + inc;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">         <span class="keyword">if</span> (newVal &lt; <span class="number">0</span> || newVal &gt; <span class="number">5</span>) &#123;</span></span><br><span class="line"><span class="undefined">            newVal = point.y - inc;</span></span><br><span class="line"><span class="undefined">         &#125;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined">         point.update(newVal);</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   &#125;;   </span></span><br><span class="line"><span class="undefined">   </span></span><br><span class="line"><span class="javascript">   <span class="comment">// Bring life to the dials</span></span></span><br><span class="line"><span class="undefined">   setInterval(chartFunction, 2000);</span></span><br><span class="line"><span class="undefined">&#125;);</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>示例3音量表</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>Highcharts 教程 | 菜鸟教程(runoob.com)<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://code.highcharts.com/highcharts.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://code.highcharts.com/highcharts-more.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span>  </span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"container"</span> <span class="attr">style</span>=<span class="string">"width: 550px; height: 400px; margin: 0 auto"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">language</span>=<span class="string">"JavaScript"</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;  </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> chart = &#123;      </span></span><br><span class="line"><span class="javascript">      type: <span class="string">'gauge'</span>,</span></span><br><span class="line"><span class="undefined">      plotBorderWidth: 1,</span></span><br><span class="line"><span class="undefined">      plotBackgroundColor: &#123;</span></span><br><span class="line"><span class="undefined">         linearGradient: &#123; x1: 0, y1: 0, x2: 0, y2: 1 &#125;,</span></span><br><span class="line"><span class="undefined">         stops: [</span></span><br><span class="line"><span class="javascript">            [<span class="number">0</span>, <span class="string">'#FFF4C6'</span>],</span></span><br><span class="line"><span class="javascript">            [<span class="number">0.3</span>, <span class="string">'#FFFFFF'</span>],</span></span><br><span class="line"><span class="javascript">            [<span class="number">1</span>, <span class="string">'#FFF4C6'</span>]</span></span><br><span class="line"><span class="undefined">         ]</span></span><br><span class="line"><span class="undefined">      &#125;,</span></span><br><span class="line"><span class="javascript">      plotBackgroundImage: <span class="literal">null</span>,</span></span><br><span class="line"><span class="undefined">      height: 200</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> credits = &#123;</span></span><br><span class="line"><span class="javascript">      enabled: <span class="literal">false</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> title = &#123;</span></span><br><span class="line"><span class="javascript">      text: <span class="string">'音量表（VU Meter）'</span></span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> pane = [&#123;</span></span><br><span class="line"><span class="undefined">         startAngle: -45,</span></span><br><span class="line"><span class="undefined">         endAngle: 45,</span></span><br><span class="line"><span class="javascript">         background: <span class="literal">null</span>,</span></span><br><span class="line"><span class="javascript">         center: [<span class="string">'25%'</span>, <span class="string">'145%'</span>],</span></span><br><span class="line"><span class="undefined">         size: 300</span></span><br><span class="line"><span class="undefined">      &#125;, &#123;</span></span><br><span class="line"><span class="undefined">         startAngle: -45,</span></span><br><span class="line"><span class="undefined">         endAngle: 45,</span></span><br><span class="line"><span class="javascript">         background: <span class="literal">null</span>,</span></span><br><span class="line"><span class="javascript">         center: [<span class="string">'75%'</span>, <span class="string">'145%'</span>],</span></span><br><span class="line"><span class="undefined">         size: 300</span></span><br><span class="line"><span class="undefined">   &#125;];</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> yAxis = [&#123;</span></span><br><span class="line"><span class="undefined">         min: -20,</span></span><br><span class="line"><span class="undefined">         max: 6,</span></span><br><span class="line"><span class="javascript">         minorTickPosition: <span class="string">'outside'</span>,</span></span><br><span class="line"><span class="javascript">         tickPosition: <span class="string">'outside'</span>,</span></span><br><span class="line"><span class="undefined">         labels: &#123;</span></span><br><span class="line"><span class="javascript">            rotation: <span class="string">'auto'</span>,</span></span><br><span class="line"><span class="undefined">            distance: 20</span></span><br><span class="line"><span class="undefined">         &#125;,</span></span><br><span class="line"><span class="undefined">         plotBands: [&#123;</span></span><br><span class="line"><span class="javascript">            <span class="keyword">from</span>: <span class="number">0</span>,</span></span><br><span class="line"><span class="undefined">            to: 6,</span></span><br><span class="line"><span class="javascript">            color: <span class="string">'#C02316'</span>,</span></span><br><span class="line"><span class="javascript">            innerRadius: <span class="string">'100%'</span>,</span></span><br><span class="line"><span class="javascript">            outerRadius: <span class="string">'105%'</span></span></span><br><span class="line"><span class="undefined">         &#125;],</span></span><br><span class="line"><span class="undefined">         pane: 0,</span></span><br><span class="line"><span class="undefined">         title: &#123;</span></span><br><span class="line"><span class="xml">            text: 'VU<span class="tag">&lt;<span class="name">br</span>/&gt;</span><span class="tag">&lt;<span class="name">span</span> <span class="attr">style</span>=<span class="string">"font-size:8px"</span>&gt;</span>Channel A<span class="tag">&lt;/<span class="name">span</span>&gt;</span>',</span></span><br><span class="line"><span class="undefined">            y: -40</span></span><br><span class="line"><span class="undefined">         &#125;</span></span><br><span class="line"><span class="undefined">      &#125;, &#123;</span></span><br><span class="line"><span class="undefined">         min: -20,</span></span><br><span class="line"><span class="undefined">         max: 6,</span></span><br><span class="line"><span class="javascript">         minorTickPosition: <span class="string">'outside'</span>,</span></span><br><span class="line"><span class="javascript">         tickPosition: <span class="string">'outside'</span>,</span></span><br><span class="line"><span class="undefined">         labels: &#123;</span></span><br><span class="line"><span class="javascript">            rotation: <span class="string">'auto'</span>,</span></span><br><span class="line"><span class="undefined">            distance: 20</span></span><br><span class="line"><span class="undefined">         &#125;,</span></span><br><span class="line"><span class="undefined">         plotBands: [&#123;</span></span><br><span class="line"><span class="javascript">            <span class="keyword">from</span>: <span class="number">0</span>,</span></span><br><span class="line"><span class="undefined">            to: 6,</span></span><br><span class="line"><span class="javascript">            color: <span class="string">'#C02316'</span>,</span></span><br><span class="line"><span class="javascript">            innerRadius: <span class="string">'100%'</span>,</span></span><br><span class="line"><span class="javascript">            outerRadius: <span class="string">'105%'</span></span></span><br><span class="line"><span class="undefined">         &#125;],</span></span><br><span class="line"><span class="undefined">         pane: 1,</span></span><br><span class="line"><span class="undefined">         title: &#123;</span></span><br><span class="line"><span class="xml">            text: 'VU<span class="tag">&lt;<span class="name">br</span>/&gt;</span><span class="tag">&lt;<span class="name">span</span> <span class="attr">style</span>=<span class="string">"font-size:8px"</span>&gt;</span>Channel B<span class="tag">&lt;/<span class="name">span</span>&gt;</span>',</span></span><br><span class="line"><span class="undefined">            y: -40</span></span><br><span class="line"><span class="undefined">         &#125;</span></span><br><span class="line"><span class="undefined">   &#125;];</span></span><br><span class="line"><span class="undefined">   </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> plotOptions = &#123;</span></span><br><span class="line"><span class="undefined">      gauge: &#123;</span></span><br><span class="line"><span class="undefined">            dataLabels: &#123;</span></span><br><span class="line"><span class="javascript">            enabled: <span class="literal">false</span></span></span><br><span class="line"><span class="undefined">         &#125;,</span></span><br><span class="line"><span class="undefined">         dial: &#123;</span></span><br><span class="line"><span class="javascript">            radius: <span class="string">'100%'</span></span></span><br><span class="line"><span class="undefined">         &#125;</span></span><br><span class="line"><span class="undefined">      &#125;</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> series= [&#123;</span></span><br><span class="line"><span class="undefined">        data: [-20],</span></span><br><span class="line"><span class="undefined">        yAxis: 0</span></span><br><span class="line"><span class="undefined">     &#125;, &#123;</span></span><br><span class="line"><span class="undefined">        data: [-20],</span></span><br><span class="line"><span class="undefined">        yAxis: 1</span></span><br><span class="line"><span class="undefined">   &#125;];     </span></span><br><span class="line"><span class="undefined">      </span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> json = &#123;&#125;;   </span></span><br><span class="line"><span class="undefined">   json.chart = chart; </span></span><br><span class="line"><span class="undefined">   json.credits = credits;</span></span><br><span class="line"><span class="undefined">   json.title = title;       </span></span><br><span class="line"><span class="undefined">   json.pane = pane; </span></span><br><span class="line"><span class="undefined">   json.yAxis = yAxis; </span></span><br><span class="line"><span class="undefined">   json.plotOptions = plotOptions;  </span></span><br><span class="line"><span class="undefined">   json.series = series;      </span></span><br><span class="line"><span class="undefined">   </span></span><br><span class="line"><span class="javascript">   <span class="comment">// Add some life</span></span></span><br><span class="line"><span class="javascript">   <span class="keyword">var</span> chartFunction = <span class="function"><span class="keyword">function</span> (<span class="params">chart</span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">      setInterval(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">         <span class="keyword">if</span> (chart.series) &#123; <span class="comment">// the chart may be destroyed</span></span></span><br><span class="line"><span class="javascript">            <span class="keyword">var</span> left = chart.series[<span class="number">0</span>].points[<span class="number">0</span>],</span></span><br><span class="line"><span class="undefined">            right = chart.series[1].points[0],</span></span><br><span class="line"><span class="undefined">            leftVal,</span></span><br><span class="line"><span class="undefined">            rightVal,</span></span><br><span class="line"><span class="javascript">            inc = (<span class="built_in">Math</span>.random() - <span class="number">0.5</span>) * <span class="number">3</span>;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined">            leftVal =  left.y + inc;</span></span><br><span class="line"><span class="undefined">            rightVal = leftVal + inc / 3;</span></span><br><span class="line"><span class="javascript">            <span class="keyword">if</span> (leftVal &lt; <span class="number">-20</span> || leftVal &gt; <span class="number">6</span>) &#123;</span></span><br><span class="line"><span class="undefined">               leftVal = left.y - inc;</span></span><br><span class="line"><span class="undefined">            &#125;</span></span><br><span class="line"><span class="javascript">            <span class="keyword">if</span> (rightVal &lt; <span class="number">-20</span> || rightVal &gt; <span class="number">6</span>) &#123;</span></span><br><span class="line"><span class="undefined">               rightVal = leftVal;</span></span><br><span class="line"><span class="undefined">            &#125;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">            left.update(leftVal, <span class="literal">false</span>);</span></span><br><span class="line"><span class="javascript">            right.update(rightVal, <span class="literal">false</span>);</span></span><br><span class="line"><span class="undefined">            chart.redraw();</span></span><br><span class="line"><span class="undefined">         &#125;</span></span><br><span class="line"><span class="undefined">      &#125;, 500);</span></span><br><span class="line"><span class="undefined">   &#125;;</span></span><br><span class="line"><span class="undefined">   </span></span><br><span class="line"><span class="javascript">   $(<span class="string">'#container'</span>).highcharts(json, chartFunction);  </span></span><br><span class="line"><span class="undefined">&#125;);</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="jQuery树形目录"><a href="#jQuery树形目录" class="headerlink" title="jQuery树形目录"></a>jQuery树形目录</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">title</span>&gt;</span>菜鸟教程(runoob.com)<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"></span><br><span class="line">	<span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">href</span>=<span class="string">"https://static.runoob.com/assets/js/jquery-treeview/jquery.treeview.css"</span> /&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">href</span>=<span class="string">"https://static.runoob.com/assets/js/jquery-treeview/screen.css"</span> /&gt;</span></span><br><span class="line"></span><br><span class="line">	<span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://static.runoob.com/assets/js/jquery-treeview/jquery.cookie.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://static.runoob.com/assets/js/jquery-treeview/jquery.treeview.js"</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line">	<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">	$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">		$(<span class="string">"#browser"</span>).treeview(&#123;</span></span><br><span class="line"><span class="javascript">			toggle: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">				<span class="built_in">console</span>.log(<span class="string">"%s was toggled."</span>, $(<span class="keyword">this</span>).find(<span class="string">"&gt;span"</span>).text());</span></span><br><span class="line"><span class="undefined">			&#125;</span></span><br><span class="line"><span class="undefined">		&#125;);</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="javascript">		$(<span class="string">"#add"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="xml">			var branches = $("<span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">'folder'</span>&gt;</span>New Sublist<span class="tag">&lt;/<span class="name">span</span>&gt;</span><span class="tag">&lt;<span class="name">ul</span>&gt;</span>" +</span></span><br><span class="line"><span class="xml">				"<span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">'file'</span>&gt;</span>Item1<span class="tag">&lt;/<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span>" +</span></span><br><span class="line"><span class="xml">				"<span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">'file'</span>&gt;</span>Item2<span class="tag">&lt;/<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span><span class="tag">&lt;/<span class="name">ul</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span>").appendTo("#browser");</span></span><br><span class="line"><span class="javascript">			$(<span class="string">"#browser"</span>).treeview(&#123;</span></span><br><span class="line"><span class="undefined">				add: branches</span></span><br><span class="line"><span class="undefined">			&#125;);</span></span><br><span class="line"><span class="undefined">		&#125;);</span></span><br><span class="line"><span class="undefined">	&#125;);</span></span><br><span class="line"><span class="undefined">	</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">	<span class="tag">&lt;<span class="name">h1</span> <span class="attr">id</span>=<span class="string">"banner"</span>&gt;</span>jQuery Treeview 简单实例<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"main"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">	</span><br><span class="line"></span><br><span class="line">	<span class="tag">&lt;<span class="name">ul</span> <span class="attr">id</span>=<span class="string">"browser"</span> <span class="attr">class</span>=<span class="string">"filetree treeview-famfamfam"</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"folder"</span>&gt;</span>Folder 1<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"folder"</span>&gt;</span>Item 1.1<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">						<span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"file"</span>&gt;</span>Item 1.1.1<span class="tag">&lt;/<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"folder"</span>&gt;</span>Folder 2<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">						<span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"folder"</span>&gt;</span>Subfolder 2.1<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">							<span class="tag">&lt;<span class="name">ul</span> <span class="attr">id</span>=<span class="string">"folder21"</span>&gt;</span></span><br><span class="line">								<span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"file"</span>&gt;</span>File 2.1.1<span class="tag">&lt;/<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">								<span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"file"</span>&gt;</span>File 2.1.2<span class="tag">&lt;/<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">							<span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">						<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">						<span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"folder"</span>&gt;</span>Subfolder 2.2<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">							<span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">								<span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"file"</span>&gt;</span>File 2.2.1<span class="tag">&lt;/<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">								<span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"file"</span>&gt;</span>File 2.2.2<span class="tag">&lt;/<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">							<span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">						<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"closed"</span>&gt;</span><span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"folder"</span>&gt;</span>Folder 3 (closed at start)<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">						<span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"file"</span>&gt;</span>File 3.1<span class="tag">&lt;/<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"file"</span>&gt;</span>File 4<span class="tag">&lt;/<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"></span><br><span class="line">	<span class="tag">&lt;<span class="name">button</span> <span class="attr">id</span>=<span class="string">"add"</span>&gt;</span>Add!<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"></span><br><span class="line">	</span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
      
    </div>

    <div>
      
        

      
    </div>

    <div>
      
        

      
    </div>


    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/tags/学习/" rel="tag"># 学习</a>
          
        </div>
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2017/03/09/second/" rel="next" title="angularjs之内置指令">
                <i class="fa fa-chevron-left"></i> angularjs之内置指令
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2017/03/11/first/" rel="prev" title="正则表达式">
                正则表达式 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </article>



    <div class="post-spread">
      
        <!-- JiaThis Button BEGIN -->
<div class="jiathis_style">
  <a class="jiathis_button_tsina"></a>
  <a class="jiathis_button_tqq"></a>
  <a class="jiathis_button_weixin"></a>
  <a class="jiathis_button_cqq"></a>
  <a class="jiathis_button_douban"></a>
  <a class="jiathis_button_renren"></a>
  <a class="jiathis_button_qzone"></a>
  <a class="jiathis_button_kaixin001"></a>
  <a class="jiathis_button_copy"></a>
  <a href="http://www.jiathis.com/share" class="jiathis jiathis_txt jiathis_separator jtico jtico_jiathis" target="_blank"></a>
  <a class="jiathis_counter_style"></a>
</div>
<script type="text/javascript">
  var jiathis_config={
    hideMore:false
  }
</script>
<script type="text/javascript" src="http://v3.jiathis.com/code/jia.js" charset="utf-8"></script>
<!-- JiaThis Button END -->

      
    </div>
  </div>


          </div>
          

  <p>热评文章</p>
  <div class="ds-top-threads" data-range="weekly" data-num-items="4"></div>


          
  <div class="comments" id="comments">
    
      <div id="hypercomments_widget"></div>
    
  </div>


        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope="" itemtype="http://schema.org/Person">
          <img class="site-author-image" itemprop="image" src="/uploads/avatar.jpg" alt="腊月的季节">
          <p class="site-author-name" itemprop="name">腊月的季节</p>
          <p class="site-description motion-element" itemprop="description">腊月的季节的个人博客</p>
        </div>
        <nav class="site-state motion-element">
          <div class="site-state-item site-state-posts">
            <a href="/archives">
              <span class="site-state-item-count">160</span>
              <span class="site-state-item-name">日志</span>
            </a>
          </div>

          
            <div class="site-state-item site-state-categories">
              <a href="/categories">
                <span class="site-state-item-count">72</span>
                <span class="site-state-item-name">分类</span>
              </a>
            </div>
          

          
            <div class="site-state-item site-state-tags">
              <a href="/tags">
                <span class="site-state-item-count">13</span>
                <span class="site-state-item-name">标签</span>
              </a>
            </div>
          

        </nav>

        

        <div class="links-of-author motion-element">
          
        </div>

        
        

        
        
          <div class="links-of-blogroll motion-element links-of-blogroll-inline">
            <div class="links-of-blogroll-title">
              <i class="fa  fa-fw fa-globe"></i>
              我的其他足迹
            </div>
            <ul class="links-of-blogroll-list">
              
                <li class="links-of-blogroll-item">
                  <a href="http://blog.csdn.net/qq_33433029" title="CSDN博客" target="_blank">CSDN博客</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a href="http://github.com/youandme66" title="GitHub" target="_blank">GitHub</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a href="http://www.jianshu.com/users/767025e0c4df/timeline" title="我的简书" target="_blank">我的简书</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a href="https://www.zhihu.com/people/liu-zhi-hao-85-39/activities" title="我的知乎" target="_blank">我的知乎</a>
                </li>
              
            </ul>
          </div>
        

        


      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-3"><a class="nav-link" href="#配置"><span class="nav-number">1.</span> <span class="nav-text">配置</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#参数配置-属性-事件"><span class="nav-number">2.</span> <span class="nav-text">参数配置(属性+事件)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#曲线图示例"><span class="nav-number">3.</span> <span class="nav-text">曲线图示例</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#区域图示例"><span class="nav-number">4.</span> <span class="nav-text">区域图示例</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#条形图示例"><span class="nav-number">5.</span> <span class="nav-text">条形图示例</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#柱形图示例"><span class="nav-number">6.</span> <span class="nav-text">柱形图示例</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#饼图示例"><span class="nav-number">7.</span> <span class="nav-text">饼图示例</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#散点图示例"><span class="nav-number">8.</span> <span class="nav-text">散点图示例</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#动态图示例"><span class="nav-number">9.</span> <span class="nav-text">动态图示例</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#组合图示例"><span class="nav-number">10.</span> <span class="nav-text">组合图示例</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3D图示例"><span class="nav-number">11.</span> <span class="nav-text">3D图示例</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#测量图示例"><span class="nav-number">12.</span> <span class="nav-text">测量图示例</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#jQuery树形目录"><span class="nav-number">13.</span> <span class="nav-text">jQuery树形目录</span></a></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">
  
  &copy;  2016 - 
  <span itemprop="copyrightYear">2019</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">腊月的季节</span>
</div>


<div class="powered-by">
   <a class="theme-link" href="http://www.jianshu.com/users/767025e0c4df/timeline">我的简书</a> 
</div>

<div class="theme-info">
  链接 -
  <a class="theme-link" href="https://www.zhihu.com/people/liu-zhi-hao-85-39/activities">
    我的知乎
  </a>
</div>


        

        
      </div>
    </footer>

    <div class="back-to-top">
      <i class="fa fa-arrow-up"></i>
    </div>
  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  



  
  <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>

  
  <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>

  
  <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>

  
  <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.0"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.0"></script>



  
  


  <script type="text/javascript" src="/js/src/affix.js?v=5.1.0"></script>

  <script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.0"></script>



  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.0"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.0"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.0"></script>


  



  




	

		<script type="text/javascript">
		_hcwp = window._hcwp || [];

		_hcwp.push({widget:"Bloggerstream", widget_id: 93245, selector:".hc-comment-count", label: "{\%COUNT%\}" });

		
		_hcwp.push({widget:"Stream", widget_id: 93245, xid: "2017/03/10/first/"});
		

		(function() {
		if("HC_LOAD_INIT" in window)return;
		HC_LOAD_INIT = true;
		var lang = (navigator.language || navigator.systemLanguage || navigator.userLanguage || "en").substr(0, 2).toLowerCase();
		var hcc = document.createElement("script"); hcc.type = "text/javascript"; hcc.async = true;
		hcc.src = ("https:" == document.location.protocol ? "https" : "http")+"://w.hypercomments.com/widget/hc/93245/"+lang+"/widget.js";
		var s = document.getElementsByTagName("script")[0];
		s.parentNode.insertBefore(hcc, s.nextSibling);
		})();
		</script>

	





  
  
  <script type="text/javascript">
    // Popup Window;
    var isfetched = false;
    // Search DB path;
    var search_path = "search.xml";
    if (search_path.length == 0) {
      search_path = "search.xml";
    }
    var path = "/" + search_path;
    // monitor main search box;

    function proceedsearch() {
      $("body").append('<div class="popoverlay">').css('overflow', 'hidden');
      $('.popup').toggle();
    }
    // search function;
    var searchFunc = function(path, search_id, content_id) {
      'use strict';
      $.ajax({
        url: path,
        dataType: "xml",
        async: true,
        success: function( xmlResponse ) {
          // get the contents from search data
          isfetched = true;
          $('.popup').detach().appendTo('.header-inner');
          var datas = $( "entry", xmlResponse ).map(function() {
            return {
              title: $( "title", this ).text(),
              content: $("content",this).text(),
              url: $( "url" , this).text()
            };
          }).get();
          var $input = document.getElementById(search_id);
          var $resultContent = document.getElementById(content_id);
          $input.addEventListener('input', function(){
            var matchcounts = 0;
            var str='<ul class=\"search-result-list\">';
            var keywords = this.value.trim().toLowerCase().split(/[\s\-]+/);
            $resultContent.innerHTML = "";
            if (this.value.trim().length > 1) {
              // perform local searching
              datas.forEach(function(data) {
                var isMatch = false;
                var content_index = [];
                var data_title = data.title.trim().toLowerCase();
                var data_content = data.content.trim().replace(/<[^>]+>/g,"").toLowerCase();
                var data_url = decodeURIComponent(data.url);
                var index_title = -1;
                var index_content = -1;
                var first_occur = -1;
                // only match artiles with not empty titles and contents
                if(data_title != '') {
                  keywords.forEach(function(keyword, i) {
                    index_title = data_title.indexOf(keyword);
                    index_content = data_content.indexOf(keyword);
                    if( index_title >= 0 || index_content >= 0 ){
                      isMatch = true;
                      if (i == 0) {
                        first_occur = index_content;
                      }
                    }

                  });
                }
                // show search results
                if (isMatch) {
                  matchcounts += 1;
                  str += "<li><a href='"+ data_url +"' class='search-result-title'>"+ data_title +"</a>";
                  var content = data.content.trim().replace(/<[^>]+>/g,"");
                  if (first_occur >= 0) {
                    // cut out 100 characters
                    var start = first_occur - 20;
                    var end = first_occur + 80;
                    if(start < 0){
                      start = 0;
                    }
                    if(start == 0){
                      end = 50;
                    }
                    if(end > content.length){
                      end = content.length;
                    }
                    var match_content = content.substring(start, end);
                    // highlight all keywords
                    keywords.forEach(function(keyword){
                      var regS = new RegExp(keyword, "gi");
                      match_content = match_content.replace(regS, "<b class=\"search-keyword\">"+keyword+"</b>");
                    });

                    str += "<p class=\"search-result\">" + match_content +"...</p>"
                  }
                  str += "</li>";
                }
              })};
            str += "</ul>";
            if (matchcounts == 0) { str = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>' }
            if (keywords == "") { str = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>' }
            $resultContent.innerHTML = str;
          });
          proceedsearch();
        }
      });}

    // handle and trigger popup window;
    $('.popup-trigger').click(function(e) {
      e.stopPropagation();
      if (isfetched == false) {
        searchFunc(path, 'local-search-input', 'local-search-result');
      } else {
        proceedsearch();
      };
    });

    $('.popup-btn-close').click(function(e){
      $('.popup').hide();
      $(".popoverlay").remove();
      $('body').css('overflow', '');
    });
    $('.popup').click(function(e){
      e.stopPropagation();
    });
  </script>


  
  
    <script type="text/x-mathjax-config">
      MathJax.Hub.Config({
        tex2jax: {
          inlineMath: [ ['$','$'], ["\\(","\\)"]  ],
          processEscapes: true,
          skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
        }
      });
    </script>

    <script type="text/x-mathjax-config">
      MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax(), i;
        for (i=0; i < all.length; i += 1) {
          all[i].SourceElement().parentNode.className += ' has-jax';
        }
      });
    </script>
    <script type="text/javascript" src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
  


  

  
  <script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.1.js"></script>
  <script>AV.initialize("EAvSG3QtXW1dqzq5WQ5CjH7S-gzGzoHsz", "2aiWv7vIfVY4CjKc49aPBHFX");</script>
  <script>
    function showTime(Counter) {
      var query = new AV.Query(Counter);
      var entries = [];
      var $visitors = $(".leancloud_visitors");

      $visitors.each(function () {
        entries.push( $(this).attr("id").trim() );
      });

      query.containedIn('url', entries);
      query.find()
        .done(function (results) {
          var COUNT_CONTAINER_REF = '.leancloud-visitors-count';

          if (results.length === 0) {
            $visitors.find(COUNT_CONTAINER_REF).text(0);
            return;
          }

          for (var i = 0; i < results.length; i++) {
            var item = results[i];
            var url = item.get('url');
            var time = item.get('time');
            var element = document.getElementById(url);

            $(element).find(COUNT_CONTAINER_REF).text(time);
          }
          for(var i = 0; i < entries.length; i++) {
            var url = entries[i];
            var element = document.getElementById(url);
            var countSpan = $(element).find(COUNT_CONTAINER_REF);
            if( countSpan.text() == '') {
              countSpan.text(0);
            }
          }
        })
        .fail(function (object, error) {
          console.log("Error: " + error.code + " " + error.message);
        });
    }

    function addCount(Counter) {
      var $visitors = $(".leancloud_visitors");
      var url = $visitors.attr('id').trim();
      var title = $visitors.attr('data-flag-title').trim();
      var query = new AV.Query(Counter);

      query.equalTo("url", url);
      query.find({
        success: function(results) {
          if (results.length > 0) {
            var counter = results[0];
            counter.fetchWhenSave(true);
            counter.increment("time");
            counter.save(null, {
              success: function(counter) {
                var $element = $(document.getElementById(url));
                $element.find('.leancloud-visitors-count').text(counter.get('time'));
              },
              error: function(counter, error) {
                console.log('Failed to save Visitor num, with error message: ' + error.message);
              }
            });
          } else {
            var newcounter = new Counter();
            /* Set ACL */
            var acl = new AV.ACL();
            acl.setPublicReadAccess(true);
            acl.setPublicWriteAccess(true);
            newcounter.setACL(acl);
            /* End Set ACL */
            newcounter.set("title", title);
            newcounter.set("url", url);
            newcounter.set("time", 1);
            newcounter.save(null, {
              success: function(newcounter) {
                var $element = $(document.getElementById(url));
                $element.find('.leancloud-visitors-count').text(newcounter.get('time'));
              },
              error: function(newcounter, error) {
                console.log('Failed to create');
              }
            });
          }
        },
        error: function(error) {
          console.log('Error:' + error.code + " " + error.message);
        }
      });
    }

    $(function() {
      var Counter = AV.Object.extend("Counter");
      if ($('.leancloud_visitors').length == 1) {
        addCount(Counter);
      } else if ($('.post-title-link').length > 1) {
        showTime(Counter);
      }
    });
  </script>



  
<script>
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>


  

</body>
</html>
